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CAPtTULO 1 

INTRODUCCION AL PROGRAMA ADOBE FLASH CS4 




Observa todo lo que se puede realizar con el programa de Flash, 
f 
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1.1 Ingresando al Programa Adobe Flash Cs4 




Icono de acceso directo 
del programa 



Del mismo modo que existen dos rutas conocidas para ingresar a cualquier 
programa, en Adobe Flash ocurre lo mismo. 




Ruta 1: Selecciona el boton Inicio, busca la opcion Todos los programas y elige el 
programa. 

Ruta 2: Ubica en el escritorio el icono del programa y haz doble die sobre el. 



Una vez que hayas seguido cualquiera de los dos procedimientos, observaras la siguiente 
ventana con la que el programa te da la bienvenida. 




Abrir un elemento reciente 


Crear nuevo 


Crear con plantilla 


f[ esqueleto.fia ^^^l 


f| Archivo de Flash (AS 3.0) 


*|[ Publicidad 




If Archivo de Flash (AS 2.0; 
f[ Archivo de Flash (Adobe AIR) 

Archivo de Flash (movil) 
™> Archivo ActionScript 
"n" Archivo comunic. ActionScript 
™ Archivo JavaScript de Flash 

Proyecto de Flash 


Ampliar 

Flash Exchange » 


^\ Puesta en marcha » 

J Nuevas funciones » 
Q Recursos » 


Adobe® Flash® CS4 Professional 
^^^H Ofctenga las ultimas sugerencias. pedcasts y 

| mucho mas en Adobe© Bridge Home. 


I | No volver a mostrarto 



Una vez ahi, debes 
seleccionar el archivo con el 
que trabajaras: Archivo de 
Flash (AS 3.0). 




DESCUBRE: ^Conoces otra forma de ingresar al programa? Comentala con tus companeros. 
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1 .2 Descubriendo el Entorno De Trabajo 



Observa las imageries de los entornos y comenta: ia 
que programas pertenecen? ^Cual de ellos 
corresponde al programa Flash CS4? 

Marca con una "X" la que corresponde al programa 
Flash y, en las lineas punteadas, escribe las 
diferencias que encuentras entre el entorno de este 
programa y el de los otros programas de diseho. 




Adobe Flash CS4 cuenta con un conjunto de elementos que te permiten realizar animaciones. 
Cada una de las barras, paneles, menus, etcetera cumple una funcion especifica. 



Observa los 
elementos del 
programa Adobe 
Flash CS4. 





MENUS 



CONCEPTOS BASICOS ' |p 



£ Escera 1 



Barra de 
Herramientas 




100% 



Escenario 



^ COLOR 



|ft BIBLIOTECA - BUTTONS. FIA 
|1 ALINEAR 

j() ACCIONES • FOTOGRAMA 



|ft BIBLIOTECA 



H B§ PROPIEDADES 



LINEA DE TEMPO 



9 i Q l 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 



.il -i 3 



t a o % [•] i 24,gfp5 o,Os [TE 



PANELES 



E 
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A continuacion conoceras cada uno de los elementos 
del entorno de Adobe Flash y sus funciones. 

Para comenzar a trabajar, crea una carpeta y 
nombrala "Flash", para que guardes todos los 
archivos que vas a descargar de la plataforma y los 
que vas a trabajar a lo largo del desarrollo del libro. 



1 .2.1 La barra de herramientas 



T 

\ 

a. 



Es el espacio donde se encuentran todas las herramientas que se utilizan para 
realizar imagenes y algunas caracteristicas de animacion. Es muy similar a la 
barra de herramientas de otros programas de diseno de Adobe. 



EXPLORA: Al ingresar al programa, selecciona 5 opciones de la Barra de 
herramientas, escribe sus nombres y dibujalas en el recuadro. 



3. 



4. 



5. 




Si no encuentras activada la 
Barra de herramientas, dirigete 
al menu Ventana y selecciona 
la opcion Barra de 
herramientas. 




En la Barra de herramientas, existe un grupo de herramientas que tienen un 
triangulo negro en la esquina inferior derecha. Estas herramientas contienen 
una variedad de opciones, para 
visualizarlas solo haz die sobre el 
triangulo. 



y 


■ Q Hcrrimien:a Rectangtla (R) 




j 


O Herramien^a Ovalo(O) 




y. 


U Herramien:a RectangLlo simple (R) 




& 


^> Herramienta OvaEo simple (0) 




-/ 


O Herramienta Poly Star 




J 
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1.2.2 El escenario 

Es el area donde se observa los dibujos (instancias) y 
animaciones que se realizan. 



El escenario puede ser modificado en tamano y color. Para 
realizar esta accion, debes utilizar el panel Propiedades y 
realizar los siguientes pasos: 



Selecciona el panel Propiedades. 

En la ventana que emergera, 
selecciona el boton Editar que se 
encuentra en la seccion 
propiedades. Al activar esta 
opcion, aparecera una ventana 
emergente. 




0 



CONCERTOS BASICOS ▼ | g 



PROPIEDADES 



Fl 



Documents 



Sin tftulo-1 




\7 PUB LIC AR 

Reproductor: Flash Player 10 
Scri pt: Acti o n Scri pt 3 .0 



Clase: 



Perfil: Predeterminado 



Editar.. 



AIR Configuration 

\7 PROPIEDADES 



FP5: Z4.00 



Editar... 



©□ PROPIEDADE5 



^ COLOR (jj 



3 



|h alinear 



(g) ACaONES - FOTOCRAMA 
lift, BIBLIOTECA - BUTTONS. FLA 




Propiedades del documento 



Dimensiones: E£51 5?l (andiura) x 400 px (altura) 



MODIFICAR EL TAMANO 



Ajustar angulo de perspectiva 3D para conservar proyecdon actual del escenario 
Impresora Contenido 9 Predeterminada 



(color defondo: MODIFICA EL COLOR DE FONDO 



Veloddad de 
fotogramas: 24 



fps 



Unidades de regla : | Pixeles 



En esta ventana, puedes 
modificar el tamano en la 
seccion Dimensiones y el 
color del escenario en la 
seccion Color de fondo. 



Transformar en predeterminado 



EXPLORA: Realiza diferentes modificaciones al tamano y color del escenario. Observa 
lo que sucede con este al aplicar cada uno de los cambios. 
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1.2.3 Los paneles 

Son elementos que permiten realizar diferentes acciones 
como organizar, configurar y conceder ciertas cualidades a 
los objetos que se insertan en el escenario. 

El programa Flash CS4 cuenta con una variedad de 
paneles. 



Si se cierra uno de los 
paneles, o no los 
visualizas, puedes 
recuperarlos y activarlos 
desde la opcion Ventana 
del Menu principal. 



Bo PROPIFDADES 

t£ COLOR 

B6 MUESTRAS 

|h aline ar 

BIBLIOTECA 




Cada panel cuenta con un 
conjunto de herramientas u 
opciones que permiten 
mejorar tus presentaciones. 



Ventana 



Barras de herramientas 

V Lfnea detiempo 
Editor de movimiento 

V Herramientas 
Propiedades 



Bibliotecas 

Configuration predefinida de 

Acciones 
Comportamientos 
Errores de compilador 
Paneles de depui 
Explorador de pelfculas 
Salida 

Alinear 
Color 

Informacion 
Muestras 
Transformar 

Componentes 
Inspector de componentes 
Otros paneles 

Extensiones 

Espacio detrabajo 
Ocultar paneles 

V 1 Sin ti'tulo-1 




Para organizar mejor el entorno de trabajo, puedes colocar los paneles de manera 
flotante o en otra ubicacion, para ello, solo debes arrastrarlos con el cursor. 



CONCEPTOS BASICOS ▼ [P 






| _ n x 


urar Ventana Ayuda 


£ 4j, 100% 




•U PROPIEDADES 


□ 




1 


fjf^ BIBLIOTECA 




j< COLOR 






H MUESTRAS 



OS BASICOS ▼ | [p~ 



ntana Ayuda 



& 4^ 100% 



6° PROPIEDADES 



BIBLIOTECA 



EXPLORA: Utilizando el menu Ventana, activa dos paneles y describe las opciones que 
contiene cada uno de ellos. 



1. 



2. 
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Los principales paneles de Adobe Flash son los siguientes: 



Panel Propiedades: Muestra las caracteristicas que tiene el escenario y las de los 
objetos que se insertan en el. 



propiedades 



^ COLOR 



-ft- 



MUESTRAS 



PROPIEDADES 



AUNE BIBU C 



Fl 



Documento 
Sin ti'tulo-1 



V PUBLICAR 




Reproductor: Flash Player 10 




Script: ActionScript 3.0 




Clase: Q 


1/ 


Perfil: Predeterminado 


| Editar... | 


AIR Configuration 




\7 PROPIEDADES 




FPS: 24.00 




Tamafio: 550 x400 px 


| Editar... | 


Escenario: | | 



EXPLORA: Descarga el archivo racimodeuvas.fla 
(de la plataforma). 

Selecciona la imagen del archivo que descargaste y 
observa que nuevas secciones se activan en el 
panel Propiedades. Luego, escribe que acciones 
puedes realizar en la imagen, con la ayuda de este 
panel. 



Recuerda que si deseas 
modificar las propiedades del 
escenario, no debe haber 
ningun objeto seleccionado. 
Pero si deseas modificar las 
propiedades de algun objeto 
primero, debes seleccionarlo. 





Para abrir una nueva area de 
trabajo, dirigete al menu Archivo y 
elige la opcion Abrir. 




No olvides guardar tu trabajo, 
pues lo vas a utilizar para 
explorar los otros paneles. Para 
ello, solo tienes que ir al menu 
Archivo y seleccionar la opcion 
Guardar. 
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• Panel Color: En este panel se ubican todos los colores que puedes aplicar al contorno y 
relleno de las imagenes creadas o insertadas. Tambien contiene diferentes 
tipos de efectos como el degradado y el alfa (nivel de transparencia). 




COLOR | Mid AUlj SEBlj 



I -= 



Tipo: 



Solido 



JOS PROPIEDADE5 



f Gambia el color de ^ 
contorno por el de 
g^^^fcrelleno y viceversa I 



( $f COLOR 



0 


T 


153 


~W 


255 


T 


100% 


T 




S0099FI 



MUEsTHAfi 
|_ alinear 
biblioteca 



El color tambien puede 
visualizarse mediante codigos 



EXPLORA: Trabajando con el mismo archivo racimodeuvas.fla, haz doble die sobre la 
imagen y selecciona algunas de las uvas del racimo. Luego, cambialas de color de 
relleno, a verde, una a una, utilizando el panel Color. 





Panel Biblioteca: En este panel se ubican todos los simbolos, imagenes y sonidos que se 
estan trabajando en un mismo proyecto de animacion. Los objetos que 
se guardan en este panel se pueden reutilizar y modificar a lo largo del 
proyecto. 



Cuando se selecciona una 
imagen, simbolo o cualquier otro 
objeto del panel Biblioteca, 
este se muestra en miniatura en 
la parte superior de la ventana. 



Pftd COI Mtj| AU| BIBLIOTECA | frH T = 



PRO PIED AD ES 
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Para trasladar las imageries de la Biblioteca al escenario, debes seleccionar la imagen 
deseada y arrastrarla al escenario. Para practicar esta accion, primero procede a 
borrar la imagen del racimo de uvas del escenario. Luego, ubicate en el panel 
Biblioteca, observaras que la imagen original sigue ahi. Seleccionala y arrastrala al 
escenario. 




Usando este panel, tambien puedes duplicar imageries y otorgarle a cada una de ellas 
diferentes colores y tamanos. Observa los pasos que se deben seguir para realizar esta 
accion. 



[ Uvas 



B° PROP1EDADE5 
COLOR 



Haz die en el panel 
Biblioteca. 



Selecciona la 
imagen y haz 
die derecho. 



Nombre: Uvas.ai copia 





Tipo: [Grafico ▼ ] 

Carpeta: Carpeta rag de biblioteca 



Activar gw'as para escala en 9 divisiones 
Vinculadon 



[ Basico 



□ Exportar para ActonScript 

□ Exportar en fotograma 1 



Exportar para compartir tempo de ejecudon 
Importar para compartir tempo de ejecudon 



71 Ardiivo: 

Nombre de si'mbolo: Uvas.ai copia 

Actualizar siempre antes de publicar 



Dmbrs 



[S] Uvas.ai copia 



Asi se mostrara la copia de tu 
imagen, en la biblioteca. 



EXPLORA: Activa el panel Biblioteca y observa que elementos se 
encuentran en ella. Luego, copia (Ctrl + C) y pega (Ctrl + V) una 
imagen de Internet en el escenario, por ejemplo una fruta, y 
vuelve a observar la biblioteca. ^Se han producido cambios? 
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• Panel Alinear: Este panel se utiliza para ordenar los objetos que se trabajan en el 
escenario; a la derecha, izquierda y centrar. Ademas, permite hacer 
coincidir la imagen con el tamano del escenario o distribuirla. 



Recuerda que, para 
alinear una imagen, 
primero debes 
seleccionarla. 




En 

escena 



Alinear: v^-^ 
Distribuir: v^-^ 

^ s ^ WW (H) 

Coinddir tamano lEspado: 

£1 DI S JL \F 



©§ PROPIEDADE5 

I H 

COLOR 
Sffl MUE5TRA5 



<0 



| M ALINEAR 



3 



Jjft BIBLIOTECA 



Por ejemplo, si tienes una imagen pequena y deseas modificar su tamano para utilizarla 
como fondo de tu trabajo, debes seleccionar esta opcion y realizar los siguientes pasos: 




©J PROPIEDADES 
<g COLOR 
fig MUESTRAS 


iJ 


|^ ALINEAR 

BIBLIOTECA N 






Para finalizar selecciona I 
dos ultimos botones. que es 
para ubicar la imagen en el 
mismo espacio que ocupa el 
escenario 



Para poder modificar una sola 
imagen del escenario con el 
panel Alinear, debes verificar 
que la opcion en escena este 
activada. 



En 

escena 

m 




00j 



EXPLORA: Utilizando el mismo archivo que se esta trabajando, coloca la imagen del 
racimo de uvas como imagen de fondo. 
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1 .3 Conociendo el Area De Animacion 




^Con que elemento del 
entorno del programa 
Adobe Flash crees que se 
realizan las animaciones? 

Observa la siguiente 
imagen y encierra en un 
circulo el elemento que 
creas que cumpla esta 
funcion. Luego, averigua y 
escribe las opciones que 
contiene. 



—77 



1.3.1 La Linea de tiempo 

Es el area donde se realiza las animaciones. Esta se divide en pequehos rectangulos 
verticales llamados fotogramas o frames. Los fotogramas representan un instante o un 
momento de la pelicula. 





• ft □£] 5 10 15 20 25 30 35 40 45 SO 55 60 65 70 75 80 85 90 95 100 105 110 115 














il -J i 


r* ft % M i s.oips o.os 14 1 | ► 





En la parte superior de 
la linea se visualiza el 
numero de fotograma 
en el que te encuentras 
trabajando. 



CABEZA LECTORA 




9 a □ 


5 ID 15 2D J 


!f 3D 35 4 


■ 




Acciones * * Dl 


o 


D 








Cielo * * □! 


• 


D 










□ dI* d|o dI* d* dI* d 


> D 


• dI* dI* d 








^^^^^^^^^^^^^^^^^^ 


• D 


* D 


• D 















t 



CAPAS 



FOTOGRAMAS 
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Diseho Grafico con Adobe Flash CS4 



• Capas: Tambien conocidas como layers funcionan a modo de laminas que se sobreponen 
una con otra. Sirven como contenedores de objetos y permiten organizar cada dibujo, 
imagen, sonido o accion. 




En la siguiente animacion, ^cuantos elementos ves en 
el escenario? y ^cuantas capas observas en la linea de 
tiempo? ^Crees que es importante que cada objeto 
del escenario se encuentre dentro de una capa? 




Lo recomendable es realizar o 
insertar un objeto por cada capa, 
para que cada uno de ellos tenga 
una animacion diferente. Ademas, 
trabajar de esta manera permitira 
que todo lo que se realice dentro 
de una capa no afecte a las demas, 
pues cada una es independiente 
con respecto a las otras. 
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Crear una capa: Para crear una capa, puedes elegir alguna de las siguientes opciones: 

] 




2da. Opcion 



] 



Mostrar todo 
Bloquear otros 
Ocultar otros. 



LINEA DE TIEMPO 



Insertar capa 



Elirninar capa 
Guia 

Anadir gufa de rnovirniento clasica 
Mas-cara 

Mostrar mascara 

Insertar carpeta 
Elirninar carpeta 
Expandir carpeta 
Contraer carpeta 

Expandir todas las carpetas 
Contraer to das. las carp etas. 



Propiedades... 



Clic 
derecho 



Haz clic derecho sobre la 
capa existente y selecciona la 
opcion Insertar capa. 



Cambiar el nombre a [as capas 

Para cambiar el nombre de las capas, haz doble clic al 
nombre predeterminado por el programa: Capa 1, 
Capa 2... y escribe el nombre que desees. 



Elementos de [as capas 



LIN EA DE HEM PO EDITOR DE M OVER 






□ O 




• Do 




• Do 


^Dofcle clic sofcre eP*i 
nombre de la capa 
y modificarlD j 


* Ho 


III H 



Mostnar u 
ocuftar capa 



Bloquear capa 



LINEA DE ITEM 



Image-nes 
Dibujos 



^ m ^ dVp 



10 



Contorno 



15 



20 



25 



■ 


) D 


• D 


o D 


• D 


• □ 


• D 


0 


■ L 


» D 


• 







EXPLORA: En el archivo que estas trabajando, crea 3 capas 
nuevas, en cada una de ellas copia y pega una fruta diferente. 
Luego, nombra a las capas con el nombre de las futas insertadas. 
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^Cuanto aprendi? 



1 . Identifica cuales son las herramientas que pertenecen al programa Adobe Flash y despues 
encierralas con un circulo. 




2. Escribe los nombres de las herramientas que has identificado y la funcion que realiza cada 
una de ellas. 



a. _ 

b. _ 
c. 



3. ^Cual de los siguientes paneles nos ayuda a ver, en miniatura, las imagenes, simbolos y 
sonidos con los que estamos trabajando? 

a. Panel Alinear 

b. Panel Propiedades 

c. Panel Biblioteca 

d. Panel Muestras 



4. ^Cual es el menu que permite activar la Barra de herramientas o algun panel que no se 
encuentre en el entorno del programa? 

a. Menu Archivo 

b. Menu Ventana 

c. Menu Edicion 

d. Menu Modificar 
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5. Descarga el archivo globo. fla(que se encuentra en la plataforma ) y luego realiza las 
siguientes modificaciones: 




a. Utilizando el panel Propiedades, modifica el tamano del escenario a 700 x 500 y 
aplicale un color de fondo, de preferencia color celeste cielo. 

b. Luego, utilizando el panel Color, cambia el color de trazo y el fondo del globo. 

c. Despues, cambia el nombre de la capa donde se encuentra el globo, nombrala "Globo" 
y crea una capa mas a la que llamaras "Estrellas". 

d. Finalmente, en la capa que creaste, traslada la estrella que se encuentra en el panel 
Biblioteca y ubicala al costado del globo. Repite el traslado tres veces, de manera que 
obtengas tres estrellas. 

e. Al finalizar las indicaciones, guarda tu trabajo. 

| CONCEPTOS BASICOS ▼ | |P [ - n x 



Archivo Edicion Ver Insertar Modificar Texto Comandos Control Depurar Ventana Ayuda 
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Anotaciones 



Diseho Grafico con Adobe Flash CS4 
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CAPITULO 2 



DIBUJANDO Y EDITANDO IMAGENES EN FLASH 



Observa estas herramientas y 
responde: ^las has visto antes? ^Como 
se llaman? ^Que funcion tienen? 
^Sabes como utilizarlas? Comenta con 
tus companeros. 
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Diseho Grafico con Adobe Flash CS4 



2.1 Dibujando un Personaje con las Herramientas de Flash 



iComo realizarias la siguiente imagen en Adobe Flash? 




Con la ayuda de las herramientas que se 
encuentran en la Barra de herramientas, 
podras realizar el dibujo que se muestra 
y muchos mas. 



Cada herramienta tiene 
un acceso directo, el cual 
se activa al presionar la 
tecla que representa. Por 
ejemplo: 

( Herramienta Selecci6r((Y) 




Para iniciar esta actividad, primero debes abrir un nuevo entorno de trabajo en Adobe 
Flash y elegir las dimensiones del escenario de 400 x 700 (para realizar esta accion, debes 
aplicar lo aprendido en el capitulo 1). Luego, crea 7 capas denominadas: "Ojos", "Cabeza", 
"Cuerpo", "Manos", "Pies", "Boca" y "Texto"; y despues, procede a dibujar la imagen 
correspondiente en cada una de las capas, utilizando las herramientas que se muestran a 
continuacion. 



> ELABORANDO EL OJO DEL PERSONAJE 




Esta herramienta permite realizar circulos de todos los tamanos. Se encuentra 
dentro de un grupo de herramientas conocidas como herramientas solidas (figuras 
geometricas). Seleccionala haciendo die en la esquina desplegable de la 
herramienta Rectangulo. 



j Para dibujar el fondo del ojo de la imagen, utiliza la herramienta Ovalo 
seleccionandola de la barra de herramientas y dibujandola en el escenario. 



\ 



=L 



I ] Herramienta Rectangulo {R) 



3 Herramienta Ovalo {0) 



T 



] [ Herramienta Rectangulo simple (R) 

Herramienta Ovalo simple{0) 
O Herramienta Poly Star 









T 

\ 

o 




0 
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Utilizando la herramienta Seleccion (V) 




La herramienta Seleccion sirve para elegir, mover y modificar las imagenes o parte 
de ellas. Ademas, tiene la funcion de editar los pixeles de una imagen tipo bitmap. 



Con la ayuda de esta herramienta, dale forma al "ojo", suprimiendo parte del circulo 
realizado en el paso anterior. 



2 | Activa la herramienta Seleccion, elige el area que desees eliminar del circulo y 
presiona la tecla Supr. 




Escena 1 



<* 

P 

1 

T 

\ 

a 





Las variantes de las opciones de la herramienta Seleccion son las siguientes: 



Aparece cuando seleccionas los 
bordes de las imagenes, ya 
sean curvas o Imeas. Con esta 
modificacion de la herramienta 
Seleccion, puedes estirar, 
alargar y darle forma curva a las 
Imeas de las imagenes. 



Aparece cuando seleccionas los 
puntos o vertices de las 
imagenes. Con esta opcion, 
puedes modificar el tamano 
(reducir y estirar) y la forma de 
los vertices. 



Emplearas estas opciones a medida que se avance en el desarrollo de los capitulos. 

I ■» 

IMPORTANTE: Un dibujo en Adobe Flash esta compuesto de un relleno y un trazo. Para 
seleccionar ambos elementos a la vez, tienes que hacer doble die en la figura elegida. 





Se selecciono solo el 
contorno. 



Se selecciono solo 
el rslleno, 




Se seleccioro 
con doble cl c 
re I eno y trazo, 



/ ^5 

/ 
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Diseho Grafico con Adobe Flash CS4 



Utilizando la herramienta Bote de tinta (S) 




Esta herramienta sirve para proporcionar color a los contornos o resarcirlos. Esta 
ubicada en la opcion desplegable de la herramienta Bote de pintura. 



Al suprimir parte del circulo, observa que desaparecio el contorno inferior. Para 
volverlo a pintar, debes elegir la opcion Bote de tinta y hacer die en el contorno 
que deseas resarcir. 























A 


ffy Herramienta Bote de tinta {5) 










Para continuar con la elaboracion del "ojo", duplica la 
imagen creada en el escenario. Para realizar esta accion, 
puedes copiar y pegar utilizando la combinacion de teclas 
Ctrl+C (Copiar) y Ctrl + V (Pegar). 



Recuerda seleccionar tanto el contorno 
como el relleno de las imagenes, para ello 
debes dar doble die sobre ellas. 



Utilizando la herramienta Transformacion libre (Q) 




Esta herramienta sirve para disminuir y aumentar el tamano de una imagen, sin la 
ayuda del panel Propiedades. Tambien, permite modificar la forma de las imagenes 
y girarlas. 




0 



Una vez que tengas la copia, observa que esta 
tiene el mismo tamano que la original, sin 
embargo, para realizar el "ojo" se necesita la 
misma forma pero mas pequena. Por ello, tienes 
que reducir su tamano, utilizando la herramienta 
Transformacion libre. 

Al seleccionar la imagen, cuando esta activada esta 
herramienta, aparecera un recuadro compuesto por 
controladores circulares en el contorno de la forma. Al 
seleccionar estos controladores y moverlos, podras 
reducir o aumentar el tamano de la forma. 
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Cuando termines de reducir el tamano al deseado, ubica 
la forma trabajada (pequena) dentro de la forma mas 
grande. Observa la imagen. 





HAZLO TU MISMO: Haciendo uso 
de circulos mas pequenos, termina 
de dibujar el centro de los ojos de 
la imagen. 



Utilizando la herramienta Bote de pintura (K) 



La herramienta Bote de pintura permite aplicar relleno a los dibujos que estas 
realizando y modificar los rellenos de las imagenes exportadas. Esta herramienta se 
apoya en la herramienta Color de Relleno. 




■ 7 



Como el dibujo del "ojo" se realizo con figuras cerradas, colorealo utilizando la 
herramienta Bote de pintura. Para su aplicacion, activa esta herramienta, elige 
el color que desees en la herramienta Color de relleno y haz die en la parte de 
la imagen que quieras colorear. 




8 Despues de pintar todo el "ojo", duplicalo y ubicalo al lado 



derecho. 



Como hay distintos elementos en el dibujo del ojo, 
no lo podras seleccionar haciendo doble die, sino, 
encuadrandolo completamente con la herramienta 
Seleccion. 
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Diseho Grafico con Adobe Flash CS4 




Luego, gira un poco los ojos de tal manera que queden como la 
imagen que se muestra. Para realizar esta accion, utiliza 
nuevamente la herramienta Transformacion libre. Una vez que 
la hayas activado, ubicate en uno de los vertices de la imagen 
hasta que aparezca el siguiente simbolo y muevelo 
ligeramente. 



> ELABORANDO LA CARA DEL PERSONAJE 



1 




Al finalizar el dibujo de los ojos, trabaja en la capa denominada 
"Cabeza" y realiza la cara del sapo, para ello, utiliza nuevamente la 
herramienta Ovalo. 



Utilizando la herramienta Cuentagotas (I) 




Aplica en el objeto seleccionado el mismo color de relleno y contorno de la muestra 
de color que se elige con la herramienta. 



2 



Si no eliges un color de relleno diferente, la nueva imagen que realices tendra el mismo 
color de relleno utilizado anteriormente. Si deseas cambiarlo y no recuerdas la tonalidad 
de color empleada, utiliza la herramienta Cuentagotas. 



Selecciona la cara de la imagen (objeto al cual se 
modificara el color). Luego, activa la herramienta 
Cuentagotas y haz die en el color verde de los ojos 
(imagen de donde se tomara la muestra de color). 



Por ultimo, ubica la cara del sapo sobre los ojos, tal como se muestra 
en la imagen presentada. 





IMPORTANTE: Si la cara del sapo esta debajo de los ojos, es porque tienes que 
cambiar de posicion la capa "Cabeza", esta se debe ubicar encima de la capa "Ojos". 
Para ello, seleccionala y arrastrala hacia arriba. 

LINE A DE TIEMPO EDITOR DE MOVIE 



^] Manos 
Ojos 

ml 

iJ 

iJ J j 



□ 




LINEA DE TIEMPO EDITOR DE MOVIN 
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Esta herramienta permite elaborar lineas rectas y perpendiculares. Para utilizarla 
solo debes hacer die en la opcion ubicada en la barra de herramientas y realizar la 
accion en el escenario. 



Selecciona el primer fotograma de la capa "Boca" y con la ayuda de la 
herramienta Linea, dibuja la boca del sapo. Luego, utilizando una de las variantes 



de la herramienta Seleccion 



v 



modifica su forma recta a curva. 





Utilizando la herramienta Color de trazo 




Esta herramienta permite cambiar el color de trazos o bordes de los dibujos, al 
seleccionarla se activa una paleta con multiples colores. 



Con la herramienta Color de trazo, cambia el color de la boca del sapo. Para 
realizar esta accion, solo selecciona la linea dibujada en el escenario y luego haz 
die en la herramienta mencionada. 




Si deseas modificar el grosor de 
la linea, debes seleccionarla y 
activar el panel Propiedades. 
Luego, ubica la opcion Trazo y 
aumenta su dimension. 





PROPIEDADES 



\7 POSICION Y TAMANO 






£ 56.0 


Y: 172.0 




# W: 244.9 


H: 43,8 




S7 RELLENO Y TRAZO 








® [ZD 






= P^n 




Estilo: i SoP \ 






Escala: Esta'ndar 


MD Sugerencias 





BIBIIOTECA BUTTONS. FLA 
|_ ALINEAR 



BIBIIOTECA 



Extremo: Si ' 
Union: ^ I ' 




31 




PONTIFICIA 

UN I VERS I DAD 

CATOLICA 

DEL PERU 



HAZLO TU MISMO: Ahora, 
utilizando las herramientas 
aprendidas, realiza el cuerpo del 
sapo. Cada parte del cuerpo debe 
estar elaborada en la capa que 
corresponde. 



Diseho Grafico con Adobe Flash CS4 




IMPORTANTE: El programa Adobe Flash permite obtener imageries con diferentes 
formas a traves de figuras superpuestas con el nrrismo relleno y elaboradas en una 
misma capa. 

Observa que si dibujas un conjunto de 
circulos superpuestos, uno encima de otro, 
y luego suprimes las lineas internas, 
obtendras la imagen de una nube. 

Tambien puedes utilizar elementos de diferentes colores de relleno para cortar partes 
de las imagenes. 






El mismo procedimiento realizado con objetos solidos, tu puedes realizarlo 
combinandolo con lineas. Por ejemplo, cuando realices el dibujo de un Pacman. 
Observa el procedimiento. 

Dibuja un circulo. Utilizando la herramienta Lmea, Luego, selecciona la parte que 

traza la parte que desees recortar. desees eliminar. 



Despues, elimina la parte seleccionada utilizando la tecla Suprimir y / ' • / s v 

luego, aplica un contorno de color negro a la figura. Finalmente, ( <^ / ""^ 

dibuja el ojo del Pacman, para ello, realiza un circulo y con la ayuda ^> I ' 

de la herramienta Bote de tinta, pintalo de color negro. 7 / X 
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# AGREGANDO TEXTO AL PERSONAJE 



Utilizando la herramienta Texto (T) 




Esta herramienta permite insertar un contenido escrito a las imageries y 
animaciones. Se recomienda que esta herramienta se aplique en una capa 
independiente, a fin de otorgarle una animacion diferente. 



Selecciona el primer fotograma en la capa "Texto" y activa la herramienta Texto. 
Luego, escribe la palabra "felicidades" en el centro de la barriga del sapo. Para poder 
asignarle otro tipo de fuente y tamano, selecciona el texto creado y haz die en el panel 
Propiedades. Observa los pasos: 



PROPIEDADES | MOE5TRAS | 



tatico^ 



Clic en 
propiedade 



^7 P05ICION Y TAMANO 

X: 118-7 




BIBLIOTECA - BUTTON 5. FLA 



V CARACTER 



Familia: 



tstno: 
Tamano: 
Color:] 
Suavizado: 



Aria I 




ALrNEAR 



O Elephant 



Haz clic en el boton 
desplegable de la opcion 
Familia y elige el tipo de fuente 
que d eseas para el texto ^ 

\fa BIBLIOTECA 
Sample 





bAMHLE * s 


f Eras Bold 1TC 


Sample 


U Eras Demi mc 


Sample 


0 Eras Light mc 




0 Eras Medium 1TC 


Sample 


0 Estranaelo Edessa 


Sample 




PROPIEDADES | MUEStH BIBUOtI AOMEflj | - 

T 



Texto estatico 



\7 POSICION Y TAMANO 

X: lia.7 Y: 23B.7 



f c 



Con esta opcion podemos cambiar 
el tamano del texto, el color y el 
espaciado entre letras. 



Estilo: Regular 



(Tamano: 
Color: 



EB I Espaciado entr... 0.0 



0 Ajuste automatico 



Suavizado: | Suavizado para animacion | * 



\m\ 



Si deseas aplicarle algun efecto al texto, como por ejemplo, sombra, utiliza la opcion 
Filtros, ubicada dentro de las opciones que aparecen en el panel Propiedades al 
seleccionar el texto. Observa la imagen y sigue los pasos. 
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Observa el cambio. 




Explora: Aplica al mismo texto, otros 
filtros y observa los cambios que se 
producen. 

Desenfoque 

JrguciPADgs I 

lluminado 



FELICIDADES 



Bisel 



FELICIDADES 



lluminado degradado 

[FELICIDADES 



HAZLO TU MISMO: 
Utilizando todas las 
herramientas aprendidas, 
realiza la siguiente figura. 
Recuerda crear cada parte 
de la imagen en una capa 
distinta. 

Tambien puedes crear 
dibujos de tus propios 
personajes. 



Ahora que ya tienes listo tu dibujo 
no te olvides de guardarlo, pues lo 
utilizaras en los capitulos 
posteriores. 
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2.2 Dibujando Fondos y Paisajes 




^Alguna vez realizaste un dibujo a 
mano alzada?, ^sabes que significa 
esto? ^Que diferencias encuentras 
entre los colores pianos y 
degradados? ^Has utilizado estos 
colores? 




Ahora realiza este dibujo a mano alzada, para ello, utiliza la herramienta Pincel y los colores 
degradados. Sigue los pasos que se mencionan: 




Abre un nuevo documento de Adobe Flash y cambia las dimensiones del escenario a 800 x 250. 
Una vez que tengas el tamano indicado, nombra a la capa 1 "Fondo". 

sfr ELABORANDO EL FONDO DE LA IAAAGEN 



Utilizando la herramienta Rectangulo (R) 




Esta herramienta permite realizar cuadrilateros como cuadrados, rectangulos, 
rombos y trapecios. 



Comienza este nuevo ejercicio 
realizando el fondo de la 
imagen. Para esta accion, utiliza 
la herramienta Rectangulo y 
dibuja un rectangulo del mismo 
tamano que el del escenario. 
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Aplicando degradado radial 

Ahora, aplica al cuadrado un color de degradado para que este sea el fondo del 
paisaje que vas a realizar. Para ello, con el cuadrado seleccionado, dingete al 
panel Color y haz die en el color de relleno. Luego, en la opcion Tipo, donde 
observaras diferentes tipos de degradados, elige Radial. 




1<£ COLOR ^) 


1 ©J PRO PIED ADES 




Rffi MUESTRAS 




^\ BIBLIOTECA - BU 


IUNb.HA 


|h alinear 




l^j) ACaONES 




BIBLIOTECA 







100% 







5000000 




Puntos 
de color 



Al seleccionar la opcion 
Radial, la barra inferior del 
panel mostrara el degradado y 
dos puntos de color. 



Un degradado es un relleno 
multicolor, en el que hay un cambio 
gradual entre varios colores. 




EXPLORA: Para manipular la 
profundidad de un color degradado, 
arrastra cada "punto" de color a la 
izquierda o a la derecha. 



Alfa: 100% 


Q #000000 


1 













Alfa: 100% y #FFFFFF 




Crea los "puntos" de color que tendra tu degradado. Para ello, 
haz die al lado derecho del primer "punto" de color, asi crearas 
otro punto de degradado, al que le puedes dar un color diferente. 



H « 




Si quieres borrar algun punto de 
color, solo haz die sobre el y 
arrastralo hacia abajo. 




A cada uno de los tres "puntos de color", aplicale diferentes colores. Para realizar 
esta accion, selecciona el primer "punto" y, en la parte superior (al costado de la 
opcion Alfa), escribe el siguiente codigo: #FEF4A3 (color amarillo claro), y presiona 
Enter. Luego, trabaja con el segundo "punto", para este, coloca el codigo #FFE711 
(color amarillo); y, finalmente, al tercer "punto", aplicale el codigo #SCD2EF 
(color celeste). 



Alfa: 100% |?FEF4A3 | 




Alfk 100% [J 


|*5CD2EF | 













s 



EXPLORA: Si deseas 
conocer mas codigos de 
colores, puedes 
ingresar a la siguiente 
pagina web: 

http://www. usuarios.sion. com 
/pauluk/ color eshtml. htm 
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Esta herramienta permite manipular, modificar, rotar y mover el degradado que se 
ha aplicado a las imageries, esto se realiza a traves de sus selectores de degradado. 



Teniendo tu cuadrado con colores de 
degradado, haz die sostenido en la 
herramienta Transformacion libre y, al 
hacerlo, aparecera, al lado derecho, la 
herramienta Transformacion de 
degradado (F). 

Luego, haz die en la imagen y observa que 
aparecen los selectores. 



qi 


ftramienti 






p 










EXPLORA: Con los selectores, prueba mover el 
degrade, delimitarlo, rotarlo, manipular su tamano, y 
compara los cambios. 



7 



7 I Ahora, mueve el degradado 
hacia la derecha, presionando 
el selector central, y tambien 
arrastralo hacia arriba. 



Alfa: 


100% y 55CD2EF 


1 








\ — 1 







/ \ 



















-i 





Despues, modula los puntos de color del degradado 
desde el panel Color. Esta accion debes realizarla 
para definir el espacio que abarcara cada color. 



Observa como ha 
quedado el fondo. 




0 



Finalmente, bloquea la capa "Fondo" para que no se modifique 
por accidente. Luego, crea otra capa llamada "Dibujo". 
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> DIBUJANDO EL SUELO DE LA IAAAGEN 



Utilizando la herramienta Pincel (B) 



Esta herramienta tiene la funcion de dibujar formas a traves de trazados, asi como 
tambien, pintar el relleno de figuras abiertas. 




X Para dibujar el suelo utilizando esta herramienta, seleccionala y observa que al 
final de la barra de herramientas se activan unas opciones, estas son conocidas 
como los modificadores de la herramienta Pincel. 



a 

m 



H [ 



A veces no se ven los modificadores 
porque estan muy abajo, lo que se 
debe hacer es ensanchar la Barra de 
herramientas. 

Los dos modificadores inferiores 
manipulan el tamaho y la forma del 
pincel. 





LINI 














_3 





el tamano mas pequeho. Luego, escoge el color negro. 

El dibujo realizado con el pincel queda 
generalmente suavizado, pero si quieres 
suavizarlo mas, antes de dibujar, modifica la suavizado: [sof 
opcion Suavizado del panel Propiedades. 



Ahora procede a dibujar una linea 
que representara al suelo. 




A continuacion, cambia el color de la parte que corresponde al suelo, para ello, 
seleccionalo con ayuda de la herramienta Seleccion. 



Al cambiarle el color, 
esta seleccion se 
separa del fondo. 
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4 ] Luego, abre el panel Color y, sin mover ningun "punto", cambia los colores del 
degradado. 




> DIBUJANDO LOS CERROS DE LA IMAGEN 




La opcion Agrupar permite que diferentes objetos formen un mismo grupo o 
elemento. Esta accion se realiza con la finalidad de aplicar diferentes modificaciones a 
todos los objetos que forman el grupo . 



2 Selecciona los cerros dibujados y agrupalos (Ctrl + G) para que las lineas negras 
J no se mezclen con el color de fondo que les vas a aplicar. 
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Utilizando la herramienta Zoom (B) 




Esta herramienta amplifica la vista de los objetos que se encuentran en el 
escenario. 



3 



Ahora aplica la herramienta Zoom para acercar la vista de la imagen de los cerros 
de modo que puedas hacer un pintado mas preciso. Luego, aplicale color pintando 
con la herramienta Pincel (B). 




Aplicando el degradado lineal 



Seleccionando el relleno que acabas de pintar, 
dirigete al panel Color y escoge la opcion 
Lineal. Luego, agrega dos puntos de color y 
coloca los siguientes colores por cada punto: 



Clic en el primer "punto" 
y escribe #4064B7. 

A: 133 y I 

Alfa: 100% Q #4064B7 



Clic en el segundo "punto" 
V escribe #54329D. 



Clic en el tercer "punto" y 
escribe #56289D. 






t 157 




AJf 


E 100% Q |#54329D 








£^ 




i □ 




r 







A: 157_H 


HI 


Alfa: 100% Q 


S56289D 






ft A □ 

m 







COLOR ^ 








Tipo: 


Solido ^^^^ 






Ninguno | 




Solido^^^^^ 






Radial [XI 






Mapa de bits ^ f 



Clic en el segundo "punto" y 
escribe #9D66D5. 

213 H M l 

Alfa: 100% [▼] S9D66D5 




Para modificar la orientacion del degradado de los cerros (para que el degradado 
sea horizontal, y no vertical) utiliza la herramienta Transposicion de 
degradado, gira el degradado y luego reduce su area. 



Jit* 
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> DIBUJANDO LAS "CASITAS" DE LA IMAGEN 



Crea otra capa y en ella dibuja las casitas, puedes 
realizar solo una, luego duplicarla y modificarla 
(ya sea reduciendo o aumentando su tamano). 



LINEA DE TEMPO | EDITOR PE MOVTMIENT* 



A GUI 



□ 



Al igual que en la 
elaboracion de los cerros, 
aqui tambien manten un 
trazo agil y seguro. 




Casas 



iJ 



Dibujo 
Fondo 



□ 
□ 

□ 



T 



Luego, pinta las casitas de color bianco, siguiendo el 
procedimiento que utilizaste al trabajar los cerros. 




# DIBUJANDO LA CIUDAD DE LA IMAGEN 



Utilizando la herramienta Pluma (P) 




Esta herramienta sirve para realizar lineas rectas o curvas, su particularidad es que 
trabaja uniendo puntos y creando vertices o nodos. Tambien, es util para calcar 
dibujos repasandolos. 



Utiliza la herramienta Pluma para dibujar los edificios de la imagen. Para 
realizar esta accion, selecciona la herramienta, fija el punto inicial y luego fija 
otro punto, veras que automaticamente se forma una linea entre los dos puntos. 
Continua elaborando puntos hasta lograr la forma completa de la ciudad. 




2 



Haz die en el primer punto; luego, 
en el segundo de manera que se 
forme una linea y, posteriormente, 
en el tercer punto hasta terminar 
de realizar la figura. 




Cuando termines de realizar la figura, utiliza la herramienta Cubo de pintura 
para pintar el relleno. 



41 



PONTIFICIA 

UN I VERS I DAD 

CATOLICA 

DEL PERU 



Diseho Grafico con Adobe Flash CS4 



HAZLO TU MISMO: Utilizando las opciones de degradado y la herramienta ; 
Transformacion de degradado, realiza los cambios en el dibujo de la ciudad, para que > 
se muestre como en la imagen: 




Nivelando la transparencia con Alfa 



Alfa es la opcion que permite medir la transparencia de los colores de una imagen. Al 
reducirla, puedes lograr que la imagen se trasluzca y tenga matices compuestos por su 
color y el del color del fondo. 

Ya que estas elaborando una imagen que representa una ciudad que se pierde en el 
paisaje, lo que debes realizar para que se vea el efecto de lejam'a, es darle cierto nivel 
de transparencia de manera que se integre con el color de fondo. 





Sin transparencia 



Transparencia con Alfa 



3 1 Para realizar la accion mencionada, selecciona el dibujo de la ciudad y dirigete 
— J al panel Color, observa la muestra de color de degradado. En esa muestra, 

selecciona el primer "punto" del degradado y otorgale un valor de Alfa de 0 % y 

al segundo, 30% de Alfa. 




NOTA; Una vez terminada la ilustracion, guarda el archivo y, finalmente, exportalo como SWF I 
presionando Ctrl + Enter. Tambien, puedes verlo como una publication web con la tecla F12. 
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IMPORTANTE: Todas las herramientas aprendidas hasta el momento te permitiran , 
elaborar personajes, fondos, paisajes, etcetera. Para ello debes seleccionar La i 
apropiada para cada trabajo que realices. i 



HAZLO TU MISMO: Utilizando todas las herramientas aprendidas en este 
item, realiza las siguientes figuras y aplica las combinaciones de degradado 
que muestra la imagenes. 





2.3 Trabajando con Imagenes de Tipo Mapa de Bits en Flash 



Una pelicula realizada en Flash 
siempre estara conformada por 
imagenes digitales. Una imagen 
digital puede ser de dos tipos: 
vectorial o de mapa de bits. 



Imagenes vectoriales 




Se componen de una o varias trayectorias formadas por lineas y curvas, son las 
imagenes con las que hasta el momento has venido trabajando. 




Ya aprendiste a realizar imagenes de tipo vectorial, ahora aprenderas a trabajar con 

imagenes de tipo de mapa de bits. 
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2.3.1 Editando Imageries de mapa de bits o bitmaps 

Estas son imageries formadas por un conjunto de puntos Uamados pixeles, si mi lares a un 
mosaico. Los pi'xeles se organizan en filas y columnas, y cada uno muestra un color 
formando en conjunto una imagen. 




Cuando manipulas una imagen de mapa 
de bits, se modifica las caracteristicas 
de los pixeles individuals que la 
forman, por eso muchas veces se 
distorsionan los pixeles de la imagen. 



EXPLORA: Abre el archivo Bitmap. fla (puedes descargarlo de la plataforma) y, 
utilizando la herramienta Transformacion libre (Q), manipula la imagen que se 
encuentra en el escenario. Observa lo que sucede con la imagen cuando realizas esta 
accion. 




NOTA: Al ser manipuladas, (es decir, al ser extendidas, alargadas, reducidas, etcetera), dentro del 
programa de Flash, las imagenes bitmap suelen "distorsionarse, por eso se recomienda editarlas 
desde programas externos como por ejemplo, Photoshop. 
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> Compatibilidad de Flash con vectores y pixeles 

Para editar imagenes vectoriales, existen programas especializados como Adobe Illustrator 
o Corel Draw. Para mapas de bits, los mas utilizados son Adobe Photoshop o Corel Painter. 




Flash es un programa 
vectorial. Tambien 
manipula imagenes de 
mapa de bits, pero con 
menos opciones para 
editarlas. 



Flash tiene la singularidad de poder 
editar tanto imagenes vectoriales 
como imagenes de mapa de bits. 
Asimismo, puede visualizar una 
imagen bitmap en vectores o una 
imagen vectorial en pixeles. 



> Convertir pixeles a vectores 

En el programa Flash, para editar (borrar, cambiar de color, etcetera) imagenes de tipo 
mapa de bits, necesitas que los pixeles de este tipo de imagenes se conviertan a vectores. 
Para realizar esta accion, primero debes "desbloquear" la imagen, presionando Ctrl +B, 
luego puedes manipularla como vector seleccionando la herramienta Subseleccion. 

Observa como se realiza el proceso utilizando la imagen descargada anteriormente. 
[T] Seleccionamos (V) [2] CTRL + B 



[T] Manipulamos A 






Si seleccionas la imagen desbloqueada con la herramienta Seleccion (flecha negra), puedes 
editar sus pixeles (siempre de forma basica). 



PH Seleccionamos (V) [2] Pintamos (B) |TJ Borramos (E) 
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Busca imageries en Internet y observa 
que la mayoria tiene un fondo de color 
bianco. ^Crees que es posible trabajar 
tus animaciones con estas imagenes? 
Comenta con tus companeros. 



Utilizando la herramienta Lazo (L) 




Esta herramienta permite seleccionar las areas que desees de las imagenes, ya sea 
para cortarlas o copiarlas. Uno de sus modificadores es la Varita magica, esta 
permite seleccionar las areas siguiendo la similitud de los pixeles de las imagenes. 



Las imagenes que tienen un fondo bianco no son adecuadas para realizar animaciones 
en Adobe Flash. Por ello, es necesario que las modifiques y les quites el fondo, para 
esta accion debes utilizar la Varita magica. 

Continua trabajando con la imagen de la fresa, observala, ^tiene un fondo bianco? Tal 
vez no lo puedas identificar, pero si cambias el color de fondo del escenario, la 
apreciaras mejor. 



N 

a 
s 

a 



Activam os la 
herramienta Lazo 




PROPIEDADES 



□ LO MUES ALINE BIBUC 



R 

i Bitmap.fla 
V PUBLICAR 

Reproductor: Flash Player 10 
Script: ActionScript 3.0 
Clase: | 

Perfil: Predeterminado 
AIR Configuration 



__l ^ 
| Editar... | 





terminar de seleccionar^ 
la herramienta Lazo, 
aparecera en la parte 
inferior la herramienta 
Varita Magica 
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Una vez que la imagen esta desbloqueada, selecciona la Varita magica. Haz die en el area 
blanca de la imagen y elimina el area seleccionada, con la tecla Supr. 



Desbloquea la imagen con 
(Ctrl + B). 



Selecciona con la Varita 
magica, el area blanca de la 
imagen. 



Presiona la tecla Supr y se 
eliminara el fondo 
seleccionado. 





Ahora si puedes trabajar con esta imagen en Adobe Flash. Recuerda este 
procedimiento para realizar tus animaciones con imagenes importadas. 



2.4 Utilizando la Opcion Mascara 



A continuacion, trabajaras con una ilustracion estilo mosaico, 
con la que aprenderas a crear una mascara. 

Se le llama "Mosaico" 
a cualquier obra 
realizada con modulos 
o fracciones. 




2.4.1 Preparando los elementos a enmascarar 

Para realizar este ejercicio, utiliza el archivo Mosaico. fla, que puedes descargarlo de la 
plataforma. Una vez que abras el archivo, encontraras la siguiente imagen: 




Observa que el escenario 
es muy amplio para la 
imagen, asi que 
modificalo cambiando 
sus dimensiones de 
tamano a 380 x 400 
pixeles. 
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Luego, cambia el nombre de la 
capa 1 y llamala "Delfin". Como 
aun no vas a trabajar en ella, se 
recomienda que la bloquees y la 
ocultes. 




LINEA DE TEMPO 


EDITOR DE MOV1MIE 












f 







LINEA DE TEMPO 


EDITOR DE MOVIMIENTO | 




» a nf 


5 




|Mosaico| |^ □ < 


I 


^ Delfin 


X a 









Ahora, crea otra capa con el nombre "Mosaico". 

En esta capa, realizaras la ilustracion a la cual colocaras la 
mascara del delfin. 



Utilizando la herramienta PolyStar 




Esta herramienta permite crear todo tipo de figuras cerradas que tengan diferentes 
lados y vertices. Por ejemplo, triangulos, poligonos, octagonos, estrellas, etcetera. 



El mosaico del delfin esta conformado por triangulos 
pequenos. Para crear un triangulo, selecciona la opcion 
desplegable de la herramienta Cuadrado y elige la 
herramienta PolyStar. Despues, activa la opcion Dibujo 
de objeto (es un modificador de las herramientas de 
dibujo). 



Luego, selecciona el panel Propiedades (Ctrl + F3) y haz die en Opciones. En la 
ventana emergente que aparecera, cambia el numero de lados, para que sea un 
triangulo, debe tener 3 lados. 





eg 




Eft 


BIBLIQT^A 




& 


COLOR 



m 



Opciones. 



Opciones esta en 
la zona inferior del 
panel 
Propiedades. 



Configuracion de herramienta 


Estilo: 


Poligono T 




Numero de lados: 


5 




Tamano de purttos de estrella: 


050 




( Ace 













Posteriormente, dibuja el triangulo en el escenario, para esta accion 
presiona la tecla Shift (sirve para hacer una figura perfecta) y 
arrastra el cursor del mouse para realizar la figura. 
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Una vez realizado el triangulo, cambia su tamano a 20 x 20 pixeles. Para ello, 
seleccionalo (V) y dingete al panel Propiedades (Ctrl + F3). Luego, en la seccion 
Posicion y tamano de este panel, modifica el ancho (W = Width) y el alto (H = High) a 
20 x 20 pixeles. 



Guarda tu archivo 
antes de seguir 
trabajando. 



PROPIEDADES 





Objeto de dibujo 



V POSICION Y TAMANO 

X: 240,8 Y: 122,7 



X? RELLENO Y TRAZO > 




\7 POSICION V TAMANO 

X: 24i] .3 Y: 122.7 



€3 



W: 20.0 



H: 



12S.55 



□ 



NOTA: Si quieres acercarte (zoom), tambien, puedes utilizar Ctrl + barra espaciadora + die 
y para alejarte (zoom out), Ctrl + barra espaciadora + Alt + die. 



Una vez que tengas al triangulo con la medida indicada, ya no sera necesario elaborar 
otro, sino solo clonar el realizado (duplicarlo), hasta obtener el mismo elemento. Para 



realizar esta accion, ubica el triangulo en la 
+ Shift y arrastra el triangulo hacia arriba. 



esquina del escenario, luego, presiona Alt 





Utiliza Alt para 
duplicar un 
elemento y Shift 
para alinearlo 
mientras lo duplicas 




Despues, utiliza la herramienta Transformacion libre (Q) y gira el triangulo. 
Enseguida, procede a ajustar la distancia. 



m 



► 



CM 



Realiza el mismo ejercicio de duplicar (ahora seleccionando ambos triangulos) con Alt 
+ Shift y arrastralos hacia arriba. Para repetir esta accion, presiona Ctrl + Y 
(Rehacer). 
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Ahora que tienes tu primera columna de triangulos, pasa a alinearlos. Para ello, 
procede a seleccionarlos con Ctrl + A, luego dingete al panel Alinear (Ctrl +K), y alinea 
los triangulos a la izquierda y despues distribuyelos. 



CTRL + A 
CTRL + K 



ALINEAR 
Alinear: 



» I -= 



Distribuir: 



□ ° -Qa □□ 

En 



Coinddir tarnanoiEspado: 



"i 




Desactiva la 
opcion En 
escena, luego 
alineas y 
distribuyes. 



Luego, pasa a duplicar la columna de triangulos por todo el escenario. Para ello, 
selecciona los triangulos, luego presionas Alt + Shift y arrastra la columna a la 
derecha. Despues utiliza Ctrl + Y (Rehacer), las veces que sean necesarias hasta 
colmar el escenario. 



Es importante que 
aprendas a utilizar los 
shortcuts, pues asi podras 
trabajar mucho mas 
rapido. 



□ 































Escenario lleno 



NOTA: Los shortcuts o atajos son combinaciones del teclado que 
permiten ejecutar una accion mas rapidamente, como por ejemplo, 
Ctrl + Z, CTRL + A, V, etcetera. iDescubre otros! 



Una vez que termines de hacer los triangulos, 
bloquea su capa para que no se modifique 
accidentalmente. Luego, desbloquea la capa 
llamada "Delfin" para comenzar a trabajar en 
ella. 



LiNEA DETTEMPO | EDITOR DE MOVIMIENTQ | 

5 10 



rjj Mosaico 



□ 
□ 



IS 



2.4.2 Enmascarando 



La capa "Delfin" (mascara) debe estar 
encima de la capa "Mosaico" (imagen a 
enmascarar). 



Es la opcion que consiste en trabajar con una capa mascara, que muestra solo un sector 
de la imagen o dibujo de la capa que se encuentra debajo de ella (capa enmascarada). El 
sector que muestra el enmascarado va a tener la forma o silueta del dibujo que contiene la 
capa mascara, con el relleno de la capa enmascarada. 
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En el ejemplo, la figura del delfin es la mascara que vas a poner a la imagen de fondo 
compuesta por los triangulos, denominada "Mosaico". Esta accion te va permitir 
visualizar los objetos de esta capa solo en el sector que abarca el objeto de la capa 
"Delfin". 

Para realizar el procedimiento, haz die derecho sobre la capa "Delfin" y escoge la opcion 
Mascara; automaticamente esta capa enmascara a la capa de abajo "Mosaico". 





Mascara^^L 




Mostrar ni^taia 




Insertar carpeta 




Eliminar carpeta 




Expandir carpeta 




Contraer carpeta 




Expandir todas. las. carpetas. 




LINEA DETIEIY 


Contraer todas las. carp etas 




Propiedades... 


-I Delfin 




En la capa mascara 
debe estar solo la 
silueta de la imagen. 



Mosaico 



a □ 




LiNEA DETIEMPO 


EDITOR. DE MOVIMIENTO | 




a □ 1 


1 5 1 


Em 

Mosai.. 


BBS q □ 









Cuando enmascaras, se bloquean las 
capas automaticamente. Al desbloquear 
una de las dos capas, el 
enmascaramiento deja de visualizarse, 
pero si nuevamente bloqueas la 
mascara, esta vuelve a funcionar. 



Ahora debes establecer los colores del delfin. Desbloquea la capa "Mosaico", donde 
estan los triangulos. 



LiNEA DE T1EMPO 


EDITOR DE MOVIMIENTC 




* a n[ 


1 5 









gj Mosai... 






\ 






Luego, para que no te interrumpa la imagen del delfin, activa la opcion Contorno de la 
capa y cambia el color. 




Si el color del contorno no 
es visible, haz die derecho a 
la capa, luego vas a 
+ Propiedades y cambias su 
color. 




Anadir guia de movimiento c 

V Mascara 

Mostrar mascara 

Insertar carpeta 

Eliminar carpeta 
Expandir carpeta 
Contraer carpeta 

Expandir todas las carpetas 
Contraer todas las carpetas 



Propiedades... 
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Despues de esa accion, ves los triangulos que estan dentro del delfin y puedes pasar a 
manipularlos. Selecciona uno o mas triangulos (die en un triangulo + Shift sostenido+ 
die en otros triangulos) cuyo color desees cambiar, activa el panel Color y procede a 
seleccionar el color deseado. 

COLOR |_ 




Tipo: Solido 



i 

SEES 



R: 


51 




V: 


255 




A: 


255 




Alfe: 


100% 






Continua pintando los triangulos de la imagen. Los codigos de los colores que vas a 
utilizar son: 



Azul oscuro #011874 
Azul medio #003399 
Celeste #1086FC 



Al terminar de pintar la ilustracion, 
observaras que falta un detalle, el ojo. Para 
trabajar en ello, selecciona un triangulo y 
borralo (con delete o suprimir). Luego, en ese 
espacio dibuja un circulo utilizando un color 
mas oscuro. 



Tambien puedes modificar algunos triangulos cercanos al ojo para darle 
mas forma. 




Puedes utilizar 
esta combinacion 
o utilizar tu 
propia gama de 
colores. 
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Terminadas las 
modificaciones, vuelve 
a bloquear la capa 
mascara, pues el 
trabajo ha finalizado. 





Ctrl + B y luego 

editas con la 
flecha blanca (A). 



Una vez terminada 
tu ilustracion, guarda 
tu archive 



Observa otros ejemplos de enmascarado. 





HAZLO TU MISMO: 
Realiza tu propio 
enmascarado, 
utilizando la forma 
aue desees. 



Se ha enmascarado 
una fotografia en 
una forma de flor. 



Se ha enmascarado un 
dibujo en una forma 
de gota de agua. 



Se ha enmascarado fondo 
de cuadrados de colores 
en una forma de arbol. 



I 

i IMPORTANTE: Utilizando la herramienta PolyStar no solo puedes hacer poligonos, sino tambien 

i estrellas. Para ello, sigue el mismo procedimiento que se menciono al elaborar un triangulo, 

1 solo que debes seleccionar en la opcion estilo Estrella, con los lados que deseas. Observa los 

. ejemplos. 
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^Cuanto aprendi? 



1. Escribe "V" si es verdadera o "F" si es falsa cada una de las siguientes expresiones. 

a. Las imageries vectoriales son escalables, es decir, podemos hacerlas mayores o 
menores sin perder calidad 

b. Podemos obtener una imagen de mapa de bits simplemente escaneando una imagen 
ya impresa 

c. Las formas de las imagenes vectoriales pueden ser modificadas con mayor facilidad 
que las representadas en una imagen de mapa de bits 



2. ^Para que sirven estos shortcuts! 



Ctrl + barra espaciadora 



Ctrl + Alt + barra espaciadora 
Ctrl + K 



3. Realiza la siguiente imagen, utilizando las herramientas estudiadas. Toma en cuenta las 
indicaciones. 

• Utiliza colores de degradado radial para pintar el fondo de la imagen, el fondo de 
la telarana y los cuerpos de las aranas. 

• Utiliza la herramienta PolyStar para elaborar la telarana. 

• Utiliza la herramienta Ovalo para realizar la cara y los cuerpos de las aranas. 

• Utiliza la herramienta Pincel para elaborar las patas de las aranas. 

• Utiliza la herramienta Texto para realizar el texto que se encuentra en la parte 
inferior derecho del dibujo. 




^inM nrnrin tejtd 
su telotonn 
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CAPITULO 3 



ANIMACION EN ADOBE FLASH CS4 



Flash puede editar vectores a la 
perfeccion, pero su especialidad 
es crear animaciones. En este 
capftulo, crearas tus propias 
animaciones. 






Esto y mucho mas es lo que podras realizar con el programa Flash CS4: 
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3.1 Animacion en la Linea de Tiempo 




^Sabes que es un fotograma? 
^Cuantos fotogramas por 
segundo se utilizan en las 
animaciones de cine? 



Una pelicula o animacion se conforma por fotogramas o imagenes que, en conjunto, dan la 
ilusion de movimiento. Mientras mas fotogramas tengan una animacion, mas fluido sera su 
movimiento. 



1seg 




LINEA DE TIEMPO EDITOR DE MOVIMIENTi 



s> a □ i 



Para el movimiento de 
la esfera se han 
utilizado 12 
fotogramas por 
segundo (FPS). 



Para un segundo de esta pelicula se han usado 12 fotogramas; para 2 segundos, 24 fotogramas 
y asi sucesivamente. 



Para el movimiento de 
la esfera se han 
utilizado 24 
fotogramas por 
segundo (FPS). 




1seg 



MEADE TIEMPO EDITO^QE MOVIMIENTO | 




IK 










9 A 


5 


10 


15 


20 






.I.I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. I. 













Para un segundo de esta pelicula se han usado 24 fotogramas; para 2 segundos, 48 fotogramas 
y asi sucesivamente. 

En ambos ejemplos, la Linea de tiempo muestra un segundo de animacion, lo que cambia es la 
cantidad de fotogramas y, por tanto, la naturalidad del movimiento. 
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Antes de pasar a los tipos 
de animacion, veremos la 
utilidad y uso de los 
simbolos. 



> Simbolos 

En el programa Flash, para insertar una animacion a un objeto (imagenes y textos) en 
algunos casos necesita convertirlos en simbolos. 

Los simbolos provienen de objetos que creas utilizando las herramientas que proporciona el 
programa. Estos objetos, al ser transformados en simbolos, son incluidos a una biblioteca 
en el momento que son creados. 



Existen 3 tipos de simbolos: 
• Clip de pelicula 



S Clip de pelicula 



Este tipo de simbolo se crea para realizar animaciones independientes dentro de un 
mismo simbolo, permitiendo que las animaciones dentro de este no se delimiten por la 
animacion de la linea principal. 



Boton 



Se crea este tipo de simbolo cuando se quiere dar acciones u ordenes que respondan al 
die del mouse. 



• Grafico 



H Grata 



Se crea este tipo de simbolo para imagenes estaticas, que se animen solo en la linea de 
tiempo principal. 



3.2 Tipos de Animacion 




LINEA DE TIEMPO EDITOR DE MOVIMIENTO | 








□ 




| 15 


20 






f 


□ 


• 


+ 




* 




□ 


• ; 


^1* 


Esqueleto... 


* 




□ 




+ 


^] forma 


* 




□ 


• :: 




• 


^] fotograina 


* 


n 


■ 









Existen diferentes tipos de 
animacion, los cuales 
conoceras enseguida. 
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3.2.1 Animacion fotograma a fotograma 

Es el tipo de animacion que se realiza aplicando movimientos en los objetos del 
escenario, para cada fotograma agregado de la Linea de tiempo. 



^ fotograma 



□ 




Cada fotograma contiene 
un movimiento distinto, lo 
que permite la ilusion de 
movimiento. 



Vas a realizar la siguiente animacion: 




Exporta la imagen del delfin, realizado en el capitulo anterior, en formato png. 




c 



Guardar 

Guardary compactar 
Guardar como... 
Guardar como plantilla... 

Desproteger... 
Guardartodo 
Descartar cambios 

Importar 



Ctrl+Mayus+S 



Exportar 



L MS? AW 

p b W 

Exportar imagen,,, 



Configuracion de publicacion... 
Vista previa de publicacion 
Publicar 

Configuracion de AIR... 



Ctrl+Mayus 
Mayus+F12 



"4 



Exportar peh'cula... Ctrl+Alt+Mayus+S 



Bibliotecas 

'Jk 

Equipo 



OpenOffice.org 3.3 (es) Installation Files 
Snagit_Portable_9.0.2.9 
%Red 
Equipo 
2 ELOISA 
' I Grupc en el hogar 
j-j Bibliotecas 



Mosaico_ejemplo 



Enhanced Metafile f .emf) 



Guardar las imagenes en formato png te permite 
tener la imagen sin fondo bianco, solo la figura. De 
esta manera, podras trabajar mejor las animaciones. 



- Pelicula SWF f.swf) 
1 Enhanced Metafile f emf) 
Windows Metafile f .wrnf) 
Adobe Illustrator f .ai) 
Mapa de bits f.bmp) 
| Imagen JPEG f jpg) 



^™*| | Cancelar 



if * 

O 80 85 
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A continuacion, abre el archivo mar.fla (descargalo de la 
plataforma) y crea una nueva capa, con el nombre "Delfin". 
Esta capa debe ubicarse debajo de la capa "Mar". 



3 



LINEA DETIEMPO 1 f 


OTTOR DE MOVIA 




^] mar 


* • □,, 


BS j Do 


^] cielo 


* • □,, 
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Luego, selecciona el primer fotograma de la capa "Delfin" e importa al escenario la 
imagen del delfin. Puedes hacerlo utilizando el menu Archivo y la opcion Importar. 
Observa y sigue los siguientes pasos: 



Archivo J^JEdi 

Nuevo... 
Abrir... 



(3 



Ver Insertar Modificar Texto Comandos Control Depurar Ventana Ayuda 



Buscar en Bridge 
Abrir reciente 
Cerrar 
Cerrartodo 



Guardar 

Guardary compactar 
Guardar como... 
Guardar como plantilla.., 

Desproteger... 
Guardartodo 

Descartar cambios 



Ctrl+N 
Ctrl+O 
Ctrl+Alt+O 

> 

Ctrl+W 
Ctrl+Alt+W 



Ctrl+Mayus+S 



Sintitulo-r x Sin ti'tulo-2* X | Sin ti'tulo-3 



9 

f Si 



Si eliges Importar a escenario 
(Ctrl + R), la imagen se va a 
visualizar en el area de trabajo 
donde estas. Si eliges 
Importar a biblioteca, la 
imagen se guarda en el panel 
Biblioteca para ser utilizada 
posteriormente. 




Observa que el delfin se inserta en el escenario. 
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Reduce el tamano del delfin utilizando la 
herramienta Transformacion libre. Luego, ubicalo 
debajo del agua. 

Ahora trabaja la animacion en la capa donde se 
encuentra el delfin. 




Insertarfotograma 

Quitar fotogramas 



Selecciona el fotograma 5 de la capa 
"Delfin" e inserta un fotograma clave, 
cuya opcion se encuentra en el menu 
contextual de este (accede a el haciendo 
die derecho sobre el fotograma). 



Ubicate en el fotograma donde 
deseas agregar el movimiento. 



Insertarfotograma clave 
I HstJ I Ld l f ULUy i dnid UdVfcHJN U l dNlU 

Borrar fotograma clave 
Convertir en fotogramas clave 
Convertir en fotogramas clave vacfos 

Cortar fotogramas 
Copiar fotogramas 
Pegar fotogramas 
Borrar fotogramas 
Seleccionar todos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScript 3.0... 
Pegar movimiento 
Pegar movimiento especial... 

Invertir fotogramas 
Sincronizar si'mbolos 



fotogramas clave en el N° 30 de las capas 
para que estas se muestren a lo largo de la 



5 or~ultimo, en el fotograma N°5 de la capa "Delfin", mueve 
la imagen del delfin de su posicion original hacia arriba y, 
utilizando la herramienta Transformacion libre, gira un poco 
la imagen. 



HAZLO TU MISMO: Del mismo modo que 
la animacion en el fotograma 5, realiza 
fotogramas en el N° 10, 15, 20 y 25 y 30, y 
modifica el movimiento del delfin como se 
muestran en las imagenes. 
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A continuacion, para que el fondo del mar simule un movimiento, realiza los siguientes 
pasos: 

8 Inserta un fotograma clave en el fotograma 15 de la capa "Mar", luego selecciona la 
imagen que se encuentra en esta, y con una de las variantes de la herramienta 
Transformacion libre i = l alargala un poco hacia la derecha. 



Cuando aparezca el simbolo, alarga 
levemente hacia la derecha la 
imagen. 




Repite el mismo procedimiento anterior en el 
fotograma N° 30, pero esta vez hacemos el 
movimiento hacia la izquierda. 



Si al realizar estos procedimientos hay superficies del 
escenario que sobresalen, puedes recortarlas 
utilizando Imeas, tal como aprendiste en el capitulo 
anterior. 



NOTA: Una vez terminada tu 
animacion, guarda tu archivo 
y exportalo como SWF 
presionando Ctrl + Enter. 





3.2.2 Animacion mediante interpolacion de forma 



"1 Forma /" * * 


■1 HI 


j 







Son animaciones que permiten realizar transformaciones, permitiendo que los objetos 
cambien de su forma original a otra diferente. 



o Interpolacion de forma en una misma imagen 

Para comprender mejor este tipo de animacion, realiza una de ellas, utilizando la 
imagen del sapo que elaboraste en el capitulo anterior. En este trabajo, modificaras su 
sonrisa. 
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LIMEA DE TIEMPO 1 










9in| 




5 




10 


15 




^ Boca 






























^ Texto 




' * ■ 








f 






^} Ojos 




> • EL 














^ Cuerpo 
























insertarrotograma 
Quitarfotogramas 










Insertarfotograma clave 







1 



Selecciona todas las capas en el fotograma N° 15, 
excepto la capa "Boca", para que esas imageries se 
visualicen en todos los fotogramas en donde se 
|realizara la animacion. Luego, en los fotogramas 
Jseleccionados haz die derecho y elige la opcion 
Mnsertar fotogramas. 



LINEA DE TIEMPO EDITOR. DE MOVIMIENTO I 



9 a □ i 



Boca 
^] Cabeza 

^ Ojos 
^] Cuerpo 



Para seleccionar todos los fotogramas N° 15 
de las diferentes capas, selecciona el 
fotograma 15 de la capa "Cabeza", luego 
utilizando la tecla Ctrl selecciona uno a 
uno los otros fotogramas. 



C 



Oar intrrpnlarinn rip mtiYimifntn 



MEA DE TIEMPO 



Insertarfotograma 
Quitarfotogramas 

Insertarfotograma clave 
Insertarfotograma clave en bianco 
Borrar fotograma clave 
Convertir en fotogramas clave 
Convertir en fotogramas clave vacfos 

Cortar fotogramas 
Copiar fotogramas 

Pegar fotogramas 
Borrar fotogramas 
Seleccionar todos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScript 3.0... 

Pegar movimiento 

Pegar movimiento especial... 

Invertir fotogramas 
Sincronizar simbolos 








Clic derecho 



0 




Ahora trabaja en la capa "Boca", ahi crea una 
interpolacion de forma. Haz clic derecho en el 
primer fotograma y selecciona la opcion Crear 
interpolacion de forma. 



Cuando creas la 
interpolacion, observa 
que el fotograma 
cambia de color a un 
verde pastel. 




I 3 



Luego, inserta un fotograma clave en el fotograma N° 7 y modifica la linea de la 
boca con la herramienta Transformacion libre, como se muestra en la imagen. 



Al crear el fotograma, 
observa que aparece una 
flecha, desde el 
fotograma 1 y llega al 7. 





LINEA DE TIEMPO 







20 


25 


30 






Cabeza ^ » 


d|.| ] 
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t»J Cabeza 
^ Texto 
■nl Pins 



* a □ i 
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HAZLO TU MISMO: Realiza los 
mismos pasos y haz que en el fotograma 
15, la boca del sapo vuelva a su estado 
original. 



Para finalizar, modifica en el panel Propiedades (sin seleccionar ningun objeto) 
la velocidad de los fotogramas a 2 FPS, para que se visualice la transformacion 
lentamente. 



PROFIEDADE5 | COLO] MUE^ AUPJ^ BIBUtj | ^ 



Fl 



Documento 
Sapo 



T_ 



Perfil: Predeterminado | Editar,., | 



AIR Configuration 



Editar... _ 



I FPS: 2,00 J 



Tamario: 400 h70D px 



Editar... 



Escenario: 



PROPIEDADE5 



K £ COLOR 
Rffl MUE5TRAS 
|h ALINEAR 




Si el FPS es menor, la velocidad 
de la animacion sera mas lenta, 
y si es mayor, ira mas rapida. 
Por defecto, siempre aparece 
con velocidad de 24 fotogramas 
por segundo. 



NOTA: Una vez terminada tu 
animacion, guarda tu archivo y, 
finalmente, exportalo como SWF 
a presionando Ctrl + Enter. 




o Interpolation de forma con diferentes imageries 

Ahora realiza una transformacion de forma con diferentes imagenes, para que la 
primera imagen se convierta en la segunda y la segunda en la tercera. 

Para realizar esta animacion, descarga el archivo mariposa.fla de la plataforma, y 
sigue los pasos que se mencionan a continuacion. 





Observa la linea de tiempo del archivo descargado, solo hay una capa y un 
fotograma. Para realizar el ejercicio, debes insertar mas fotogramas claves en el 



N° 5, 15, 20, 30 y 35. 


9 m» □ L 5 


10 15 2.0 2.5 30 E 


r ■■■■ 


KH3HBB^. nl- 


□|. □!• □!• n| 
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2 En los fotogramas 1 y 5, borra las imageries del capullo y la mariposa, para que en 
la primera parte de la animacion solo aparezca la imagen de la oruga. Para realizar 
este procedimiento, selecciona las otras dos imagenes e inmediatamente 
eliminalas (tecla Supr). 




□ d. d. d. d.l 



| HAZLO TU MISMO: En los fotogramas 15 y 20, elimina las imagenes de la oruga y la 
mariposa. Asimismo, en los fotogramas 30 y 35 elimina las imagenes de la oruga y el 
* capullo. 



KVJ 

m 




Luego, crea la primera interpolacion de forma, para que la oruga se convierta en 
capullo. Para ello, selecciona el fotograma 5, haz die derecho y elige la opcion 
Crear una interpolacion de forma. 



Crear interpolacion de movimiento 



Crear interpolacion de forma 



LINEA DE T1EMPO | 



Crear interpolacion clasica 

Insertar fotograma 
Quitar fotogramas 

Insertar fotograma clave 

Insertar fotograma clave en bianco 

Borrar fotograma clave 

Convertir en fotogramas clave 

Convertir en fotogramas clave vaci'os 

Cortar fotogramas 
Copiar fotogramas 

Pegar fotogramas 
Borrar fotogramas 
Seleccionartodos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScript 3.0... 

Pegar movimiento 

Pegar movimiento especial... 

Invertir fotogramas 
Sincronizar si'mbolos 



HAZLO TU MISMO: De la misma forma 
que has creado una interpolacion de forma 
en el fotograma 5, ahora inserta 
interpolacion de forma en el fotograma 20. 



9 a □ i 

ma. 



LINEA DE TIEMPO L 


9 A □ 1 5 10 15 


2j) 25 30 35 4( 




• □!•> >!• d 


.. i 









Observa que hay espacio entre 
cada animacion, esto permitira que 
se visualice la imagen inicial y la 
final. 



Ahora cambia la velocidad de fotogramas (FPS) a 5; y con la combinacion Ctrl + 
Enter, visualiza tu animacion. 
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o Interpolation de forma de textos 

Para realizar una interpolacion de forma en los 
textos, lo primero que debes hacer es escribir, 
en el primer fotograma, el texto deseado. Por 
ejemplo, tu nombre. 



A continuacion, copia (Ctrl + C) el nombre escrito e inserta un fotograma clave en 

bianco, en el N° 25. . s 

Cuando insertas un 
fotograma clave vacio, el 
objeto insertado en el 
primer fotograma no se 
copiara en este nuevo. 



c 




Insertar fotograma 

Quitarfotogramas 

In^prtar fntngrama rlavp 



i de movimiento 
t de forma 



Insertar fotograma clave en bianco 



Bcrrar fotograma clave 
Convertir en fotogramas clave 
Convertir en fotogramas clave vaci'os 

Cortar fotogramas 
Copiar fotogramas 
Pegar fotogramas 
Borrar fotogramas 
Seleccionartodos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScri| 

Pegar movimiento 

Pegar movimiento especial... 



IT 




En el nuevo fotograma creado, pega (Ctrl + V) tu nombre y ubicalo en la parte inferior 
del escenario. Luego, cambia las letras de tu nombre por el de tu apellido. 
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Observa que las letras de tu nombre se separan. 
Luego, selecciona nuevamente el texto y vuelve a 
realizar el mismo procedimiento. Despues de 
realizar las acciones mencionadas, observaras que 
el texto se muestra como si fuera una imagen. 



] HAZLO TU MISMO: Ingresa al fotograma donde esta tu apellido y separalo. < 
Para ello, debes seguir los pasos que se mencionaron en la actividad anterior, i 





Recuerda que para trabajar una 
interpolation de forma con textos, 
debes separarlo dos veces. Una 
manera rapida para realizar esta action 
es seleccionando el texto y utilizando la 
combination de teclas Ctrl + B dos 
veces (trabajo con el teclado). 



Al terminar de separar tanto tu nombre y apellido, ubicate en el primer fotograma, haz 
die derecho en el y selecciona la opcion Crea interpolacion de forma. 



LINEA DE T1EMPO 



* a □ : 



Crear interpolacion de movimiento 



Crear interpolacion de forma 
Crear interpolacion clasica 



In sertar fotograma 
Quitarfotogramas 



Insertar fotograma clave 
Insertar fotograma clave en bianco 
Borrar fotograma clave 
Convertir en fotogramas clave 

Sincronizar si'mbolos 



Acciones 



IDS' 



eiojsA 
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3.2.3 Animacion mediante interpolacion de movimiento 



movimiento 



Es la animacion en la que Flash calcula los valores intermedios entre dos fotogramas, de 
tal forma que el cambio sea gradual. Esta animacion solo funciona si trabajas con 
simbolos. 



Para ver la utilidad de 
este tipo de animacion, 
elabora un banner que 
promueva el deporte. 
Luego, uniras estas 
animaciones con el 
paisaje que construiste en 
el capitulo 2. 




Para empezar a trabajar esta actividad, abre el | 
documento ciclista. fla. y realiza los siguientes pasos: 



\ 



Primero, configura las propiedades del documento a 800 x sL 
250 pixeles. 





EXPLORA: El ciclista esta formado por objetos agrupados. 
Para trabajar en ellos, haz doble die en cada objeto. Al hacerlo, observa que, al lado del 
nombre de la escena, aparece el grupo en el que te encuentras (Objeto de dibujo). Para 
salir del grupo, solo haz die en Escena 1. 



Ciclista.fla* x | 







cena ] 






• Creando simbolos 




Ahora crearas un simbolo de tipo clip de pelicula, 
para animar cada parte de la imagen 
independientemente. Para crear el simbolo, 
selecciona la imagen y utiliza la tecla F8. Luego, a 
esta animacion, colocale el nombre "ciclista" y 
escoge la opcion Clip de pelicula. 



Convertir en simbolo 
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Otra manera de convertir una 
imagen en simbolo es a traves de 
la opcion Convertir en simbolo del 
menu Modificar. 



mento... 



Comandos Control Depurar 
Ctrl+J 



Convertir en simbolo... 



Separar 

Mapa de bits 

Simbolo 

Forma 



6 



Convertir en sirnbo 



Nornbre: Cidista 



Carpeta: Boton 
Grafico 




Tipo: | Clip de pelicula 



Registro: 




Aceptar 



Cancelar 



Basico 



Seleccionar los objetos que 
se quieren convertir en 
simbolo 




J 



Cuando creas un simbolo, este se almacena directamente en el panel Biblioteca y lo 
que queda en el escenario es una instancia. Una instancia es la representation del 
simbolo en el escenario. 



£§l Escena 1 




Instancia 



[Pi 



gj cidista 



I v I -68 t& 



a. | Vinculaci 



Clio de oelicula 



ilJQ^I I 



BIBLIOTEC/. 

COLOR 



1^ ALINEAR 




EXPLORA: Si haces doble die 
sobre la instancia, ingresaras al 
simbolo, y si haces doble die 
sobre la imagen del simbolo, 
ingresaras al grupo de objetos. 

Para salir de ellos, haz die en 
Escena 1. 



Ciclista.fla* x 








:ona 1 1! 


§ cidista ES Objeto de dibuio 


i 













Escena 





Simbolo 




Grupo 



• Aplicando la interpolacion de movimiento 



LINEA BE TIEMPO 



EDITOR DE MOVIMIENTO 



□I 



10 

i i i i i 



Ahora que tienes el clip de pelicula, cambia el 
nornbre de la capa a "Manejando". 
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Luego, haz die derecho en el fotograma de la capa "Manejando" y crea una 
interpolacion de movimiento. Los fotogramas marcan automaticamente un segundo y, 
segun tu documento, llega hasta el fotograma 24, ya que son 24 fotogramas por segundo 
(24fps). 



Crear interpolacion de rnoviinientc ~ 



Crear interpolacion deforma 
Crear interpolacion clas-ica 



LINEA DE "IEMPQ EDITOR DE MOVIMIENTO 


® fl □ L 5 10 15 20 

















Despues de las acciones mencionadas, comienza a realizar la animacion. Para ello, 
coloca la cabeza lectora en el ultimo fotograma, selecciona la instancia (simbolo del 
ciclista) y arrastrala hacia la derecha, de tal modo que se observe que el ciclista cruza 
el escenario. Observa la imagen. 




Presiona Enter para visualizar el movimiento. Observa que este es de un segundo y 
como es un tiempo corto, debes estirarlo (arrastrandolo) hasta el fotograma 50 de la 
linea de animacion, que es de aproximadamente 2 segundos. 



LINEA DE TIEMPO | EDITOR DE MOVIMIENTO 




Finalmente, observa que la linea que marca el movimiento del ciclista tiene mas 
puntos. Estos representan los fotogramas y pueden ser manipulados. 



Linea de 
movimiento 





Fotogramas 












+ ^^^^s 1 1 Jt 











• Trabajando dentro del simbolo y con el editor de movimiento 

El editor de movimiento sirve para darle propiedades de movimiento a los objetos (giros, 
escala, aceleradon, etcetera) que se encuentran en un fotograma que tiene una 
interpolacion de movimiento. Con este elemento, tambien puedes proporcionar efectos 
de color y filtros a las imagenes. 



LINEA DE TIEMPO [ EDITOR DE MOVIMIENTO 




Propiedad | Valor 


Aceleracion | Fotogram.. | Graiico | 




▼ Movimiento basico 

X 343,4 px 


01 Sin aceleracion l»| \^ 

01 Sin aceleracion LsJ 4 ► ^ Q 






Y 146.9 DX 
a 40 L3 2.00. CD .1 


01 Sin aceleracion \ v\ 4 ► 

[4 




► 
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Ahora, utilizando el Editor de movimiento, haz girar las ruedas del ciclista dentro de su 
propio eje. 

Lo primero que debes hacer para realizar esta accion es ingresar al si'mbolo ciclista. 




Da doble die sobre la 
instancia para entrar al 
slmbolo. 



Cidista.fla X 








ciclista 





Despues, selecciona una rueda y conviertela en un nuevo si'mbolo al cual llamaras 
"Rueda". 




Converter en simboli 



| Nombre : Rueda 




[ Aceptar 



Tipo: [clip de pelicula 



Clip de pelicula 



Carpeta: Bot6n 
Grafico 



Registro: ^ | Cancelar | 



Avanzado 




Observa la imagen, esta muestra que el grupo de 
objetos esta dentro del simbolo "Rueda" y este, a su 
vez, esta dentro del simbolo "Ciclista". Este ultimo 
simbolo se encuentra en la escena. 

Ciclista.fla* x 



Escena 1 S cicto S Rueda HI Grupo 



Ahora, vuelve al simbolo "Ciclista' 




Ordena las capas: la capa en la que esta la imagen del ciclista, la 
llamaras "Ciclista"; despues, crea otra capa con el nombre 
"Rueda", en la que animaras la rueda. 

Selecciona la rueda y presiona Ctrl X, para cortar la rueda de la 
capa "Ciclista". 



Selecciona el fotograma vacio de la capa 
"Rueda" y presiona Shift + Ctrl + V, 
para pegar la rueda en la posicion inicial. 



LINEA DE TEMPO 


EDITOR DE MOVIIVIIENTO 1 






® a □[ 


1 5 


10 


^] ciclista 


* * □ 
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Haz die derecho sobre el fotograma de la capa "Rueda" y crea una interpolacion de 
movimiento. 



LIMEA DE TTEMPQ | EDflTQR. DE MQVIMIENTQ 

5 



ciclista 



Crear interpolacion de movimiento 
Crear interpolation deforma 
Crear interpolation clasica 

Insertar fotograma 
Quitarfotoqrarnas 



S 





m a □ i s 


10 


15 


2D |25 3D 



^ cldista * * H 


• 








r rueda y" * * 




1 













Con la cabeza lectora ubicada en el ultimo fotograma, dirigete al Editor de movimiento 
(esta al lado de la Linea de tiempo) y en la opcion Rotacion, escribe 360, esto significa 
que la rueda dara una vuelta completa de 360° . 





P roped ad 


| Valor 


| Aceleracion 




| Fatogram... 


Grafico 












1 




5 


* Movimiento basico 




01 Sin aceleracion 


1 T 






















X 


153.6 px 


01 Sin aceleracion 


1 T 


4 ' 




















Y 


141 3 px 


01 Sin aceleracion 


1 T 


4 - 








































Rotacion Z 


B d 


01 Sin aceleracion 


1 T 


4 o 


0 


















* Transformacion 




01 Sin aceleracion 


1 T 






















Sesgo X 


a* 


I^J I Sin aceleracion 


1 T 


« > 


















i 20 B 40 


CD 24. 














Observa que gira la 
rueda al mover la 
cabeza lectora. 




NOTA: Si no tienes 
abierta la ventana del 
Editor de 
movimiento, puedes 
activarla en la opcion 
Ventana del menu 
principal. 



Como el tiempo es demasiado para que gire una rueda, acorta la animacion de la capa 
"Rueda" del fotograma 24 al fotograma 15. Para igualar el tiempo de la rueda con la del 
ciclista, inserta un fotograma en el numero 15 de la capa "Ciclista". 

Selecciona el fotograma 15 y presiona F5. 



LINEA DE TIEMPO 


EDITOR DE 


MOVIMIENTO 








9 A 


□ 1 5 


... . i 


h ciclista 




□•I 




rueda 















m 
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Para que ambas ruedas giren, utiliza el mismo simbolo "rueda" para ambas, asi que 
tendras que eliminar la rueda derecha, pues no esta animada y luego colocar una 
instancia del simbolo "rueda" en su lugar. 



Crea una capa nueva "rueda2" y en la capa 
"ciclista" elimina la rueda de atras (Ctrl + X). 



LIN EA DE ITEM P 0 EDITOR DE M 0 VIMIENTO j 


p a □ i s io E 




^] ciclista * * D f [ 








| rueda 2| \J □ 0 


i 






V rueda * * H • 








[H Selecciona la instancia de la capa "rueda", copiala (Ctrl + C) y pegala en la 
capa "rueda2" (Ctrl + Shift + V). 




LINEA DE TEMPO 


| EDITOR DE MOVIMIENTO | 






9 A □ i 5 10 | 


J 15 




^] ciclista 


* * □ . 








J 






rueda 













Ahora que tienes ambas ruedas animadas, 
presiona Ctrl + Enter para visualizar la 
animacion en SWF. 





IMPORTANTE: La interpolacion de movimiento no solo es lineal, pues puede tener distintas 
trayectorias que se pueden lograr modificando los puntos. Observa las trayectorias de los 
objetos animados de la siguiente imagen: 
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£ 4l 120% 




LINEA DE TIEMPO , EDITOR DE MOVIMIENTO 



9 A □ 1 5 10 15 20 Bf 30 35 40 45 50 55 60 65 70 75 



P Manposa 1 
P Mariposa 
P Sapo 

jJ — J 3 



It * ft * H 5 .Q : 4$ l« I I" 



Los rombos que se muestran en la linea de tiempo de las 
capas que tienen una interpolacion de movimiento son 
fotogramas claves de posicion. Puedes modificar las 
trayectorias de la linea de animacion insertando 
fotogramas claves de posicion y modificando la direccion 
que debe seguir el elemento. Tambien puedes utilizar 
la herramienta Seleccion (flecha negra) para darle 
forma curva o modificar los puntos que componen la 
linea de movimiento de la imagen. 



No te olvides de guardar tus archivos, 
pues los vas a utilizar mas adelante. 




Insertarfotograma clave 

Insertarfotograma clave en bianco 
Borrarfotograma clave 
Ver fotogramas clave 

Cortar fotogramas 
Copiar fotogramas 
Pegar fotogramas 
Borrar fotogramas 
Seleccionartodos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScript 3.0... 

Pegar movimiento 

Copiar propiedades 
Pegar propiedades 
Pegado especial de propiedades... 

Dividir movimiento 
Unir movimientos 
Invertir fotogramas clave 
Ruta de movimiento 



Posicion 
Escala 
Sesgo 
Rotacion 

Color 
Filtro 
Todo 



J 



HAZLO TU MISMO: Descarga el archivo saposaltarin.fla y crea las 
interpolaciones de movimiento para cada elemento de la imagen, tal como se 
muestran en la primera figura. 



3.2.4 Animacion mediante poses de cinematica inversa 



Esquelet... + + ■ 


+ * 






| T pierna 






□ 





Son animaciones mediante una estructura a modo de huesos que 
permiten un movimiento natural. 
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Ingresa al simbolo "ciclista" y anima al personaje con el 
que estas trabajando, para ello, utiliza la herramienta 
Hueso. Comienza creando una capa con el nombre 
"Pierna". 



f i □[ 


5 10 15 


1 J □ 




D 


<q] ciclista * • □ , 


D 


P ruedaZ ♦ * H 1 


+ 


jP rued a # # | 


+ 







Selecciona la pierna y la cadera de la capa "Ciclista", eliminalas con Ctrl + X y pegalas en 
la capa "Pierna", con Ctrl + Shift + V. 





s 




Para una animacion con cinematica inversa, 
necesitas tener los objetos desagrupados ya que 
la herramienta con la que trabajaras no funciona 
cuando estan agrupados. Para ello, selecciona 
los 2 objetos y presiona Ctrl + B. 




Luego, selecciona la herramienta Hueso, haz die en la cadera y arrastra el cursor del 
mouse hasta la rodilla. Despues, haz die en la rodilla y arrastra el cursor del mouse hasta el 
pie. 




Observa que todas las partes seleccionadas con la herramienta Hueso pasan 
automaticamente a una nueva capa de animacion con cinematica inversa, denominada 
"Esqueleto" Esta tendra la figura de una persona y sus fotogramas clave se llamaran pose, 
dejando la capa anterior vada. 

Para comenzar con la animacion, selecciona el fotograma 15 de la capa "Esqueleto", haz 
die derecho y elige la opcion Insertar pose, o presiona F6. 





■ 

UNI* Ot KWrO | EDITOR D£ MOV1MJINTO | 
















9 m □ i s io F 




20 


25 




Cinematica 
Inversa 


► 


* J □ 


+ 


f 
















■^j pierna * 

tJ ciclista + — ■& 


b _ — ■ — ■ * [ 
• [ 
















^ — " * + □ 


• 














Pose ^ 




• 
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Selecciona el fotograma 7 y mueve la figura pierna hacia arriba con la flecha de Seleccion 
(V), observa como se crea una pose para este nuevo movimiento. 




UNEA. DE -[EMPO EDITOR DE MOVIMIENTO 



HAZLO TU MISMO: Recuerda 
el personaje del sapo que 
realizaste, vuelve a utilizar ese 
archivo y dale movimiento 
utilizando la animacion con 
cinematica inversa, para que 
simule que esta bailando. 



LINEA DE TIEMPO [gKTOR DE MOVIMIENTO 


9 a □ i 5 1 






-J Texto . . ■ 




Pie D • • ■ 




jf- Esqueleto... • • ■ 




i| Pies ♦ . ■ 




« Manito . . ■ 




^ Mano2 • • ■ 




■-J Manos • • □ 





m a □ i 



n 



15 



jf- Esquelet... * * ■ 


+ < 


+ 






O 


D 




ridlsta * * □ 


• 


D 




P medal * * ■ 


• 


+ 




^ rueda * * ■ 


• 













Finalmente, con Ctrl + Enter veras la animacion 
completa. 



Cuando se utilizan simbolos dentro de 
otros simbolos, es necesario exportar 
la animacion como SWF. De esta 
manera, la podras ver completamente. 





3.2.5 Animacion mediante interpolacion clasica 



clasica » fl 1 1 







• 


* ? 


+ 



Es la forma en la que se creaba interpolaciones en las versiones anteriores de Flash CS4. Son 
similares a las interpolaciones de movimiento en varios aspectos, pero se diferencian porque 
tienen solo un tipo de orientacion, vertical, horizontal o perpendicular. Por otro lado, 
tambien pueden realizar distintas trayectorias, pero solo si se utiliza combinandola con la 
opcion Anadir guia de movimiento clasica. 

Ya acabaste con la animacion del ciclista, ahora, 
elabora un ti'tulo para completar el banner. 



Regresa a la Escena 1 y crea una nueva capa 
llamada "Texto". 




m 



Cielista.fla* x 








ciclista 



s 



» a □[ 


| 5 10 15 20 






jf Manejando + * H 









De esta forma se 
visualizara tu Imea 
de tiempo. 



LINEA DE TIEMPO | EDITOR DE MOVIMIENTO 




9 a □ i s 


ID 


15 


20 




30 


35 


40 


45 


50 



J □ 








f Manejando * * H 


• 


+ 
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El texto del banner pertenece a la familia "Eras Blod ITC", tamano 38. Considerando 
estas caracteristicas, escribe la siguiente frase: 



Disfruta del deporte 



El texto en Flash CS4 no necesita estar dentro de un simbolo para ser animado. Crea 
fotogramas claves, presionando F6 en el fotograma 50 y 20 de la capa "Texto". 



m 



LIN EA DE T1EM PO EDTTQ R DE M 0 VIMIENTO 



T texto y" # # 


.1 


























f Manejando * * ■ 


• 













* fl □ 1 5 10 15 20 25 30 35 40 45 




T texto y 


□ 


ol 








P Manejando * * D 


• 















LIN EA DE HEM P D EDITOR DE M O VIMIENTO | 


9 a □ i 5 id 15 i 


| 25 30 35 40 45 51 


T texto y * * 


: d 




.(P Manejando * * H 











Luego, haz die derecho en el primer grupo de fotogramas y crea una Interpolacion 
clasica. 



LINE A DE -[EMPO EDITOR DE MO VIMIENTO 



^ fl □ 1 5 10 1 


15 20 25 30 35 


1 texto y" * * 


• 




^ Manejando * * ■ 


• 


s * — 











Crear interpolation de rnovirniento 
Crear interpolation deforma 
Crear interpolation tla&ita 

In sertar fotograma 
Quitar fotogramas 



Haz lo mismo en el 
segundo grupo de 
fotogramas. 







Crear interpolation de rnovirniento 
Crear interpolation deforma 




15 10 15 20 25 30 fl 35 ^0 






Crear interpolation clasica „ 


• ; H» 

• 


* 




In sertar fotograma 
Quitar fotogramas 







Enseguida, ubicate en el primer fotograma y mueve el texto hacia arriba y hacia afuera 
del escenario. Despues disminuye su tamano con la ayuda de la herramienta 
Transformacion libre (Q) y presionando la tecla Shift para que no se desproporcione. 



m 



LINEA DETIEMPO [ 


EDITOR DE MQVTMIENTO 
























10 


15 


20 


25 


30 


35 


40 


45 


5 


-I texto 








— + • ; 












— 


^ Manejando 




















+ 





Escena 1 



-Disfruta am deporte- 
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Para ver el movimiento del texto, 
mueve la cabeza lectora o presiona 
Enter y, para ver la animacion 
completa, presiona Ctrl + Enter. 





m § □ 1 5 10 15 20 25 30j 35 40 45 50 








f Manejando * * | 








Cabeza lectora 


i 



Archivo Ver Control Depurar 




Disf ruta del deporte 





IMPORTANTE: Tambien puedes realizar movimientos con diferentes trayectorias utilizando la 
animacion de Interpolacion clasica y la opcion de Anadir guia de movimiento clasica. Observa 
y sigue los pasos, utilizando el archivo avion. fla. 




Observa el archivo 




Ubica la instancia del 
avion que se encuentra 
en el primer fotograma 
de la capa del mismo 
nombre, al inicio de la 
trayectoria. Cerciorate 
de que el inicio de la 
trayectoria este en el 
centro del avion. 
Observa la imagen. 






Gui'a: Avion / 


□ 


:• 


1 Avion 


□ 


• 


^ Fondo . a □ 


• 








Haz die derecho en la capa "avion" y elige 
la opcion Anadir guia de movimiento 
clasica. 




Dibuja con la herramienta Lapiz o 
Pluma la forma de la trayectoria, en 
la capa "guia" (lo que dibujes en esta 
capa no se visualizara al momento de 
exportar tu animacion). 



LINEA DE TTEMPO | EDITOR. DE MOV 

9 % □ 

Guia: Avion * * □ 


1MIENTQ 
1 5 




Crear interpolacion de movimiento 
Crear interpolacion deforma 




• 




Crear interpolacion cla&ica 


^ Fondo * fl □ 


• 


In sertar fotograma 



Ubica la instancia del 
avion que se encuentra 
en el fotograma 35 de la 
capa respectiva, al 
final de la trayectoria. 
Cerciorate de que el 
final de la trayectoria 
este en el centro del 
avion. 



Para finalizar, crea una interpolacion 
clasica en la capa "avion". 



Avion fi 



Archivo Ver Control Depurar 







t / 
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3.3 Uniendo Dos Archivos Flash 
3.3.1 Uniendo archivos en una misma escena 

Para unir el documento del paisaje con el del ciclista, es 
necesario que ambos documentos esten abiertos. 

Luego, pasa los objetos del documento Paisaje a una sola capa. 

Comienza a trabajar con los elementos de la capa "Paisaje". Para realizar esta accion, 
selecciona su fotograma y cortalo (Ctrl + X), luego dirigete al fotograma de la capa "Fondo" y 
presiona Ctrl + Shift + V. De esta misma forma, traslada todos los objetos de las capas 
"Casas", "Dibujo" y "Paisaje" a la capa "Fondo". 



■ 


Archive- Edicion Ver Insertar Modifies 




Ciclista ,f la x 


Paisaje.fla x 






^l Escena 1 







^ Casas * □ [ 




















Dibujo * A ■ L 




















■i J □ ] 




















Fondo * fl □ , 

























Una vez que las capas 
esten vacias, las 
eliminas. 











■ 












Fondo 








1 




J J ill \ 


in 1 





Ya que la animacion del archivo Ciclista tiene 50 fotogramas, el paisaje debe llegar al mismo 
numero de fotogramas. Primero, dirigete al fotograma 50 e inserta fotogramas. 



m 
m 















^] Fondo * * □ 









Ahora dirigete al documento Ciclista. Selecciona ambas capas, luego haz die derecho sobre los 
fotogramas y copialos. 



LINEA DETTEMPO | EDITOR DE MOVIMIENTO 

9 & □ 1 fb 10 15 20 25 3 

i i 1 1 




Cortar fotogramas 
Copiarfotogramas 
Pegar fotogramas 



Ahora regresa al archivo Paisaje y crea una nueva capa. Despues selecciona su primer 
fotograma vacio, haz die derecho y en la opcion desplegable elige la alternativa Pegar 
fotogramas. 



m 





D 


^] Fondo * * □ , 


D 







1 Capa 13 y' * * ■ 






Pegar fotogramas dsi^C 


■J Fondo * * | 1 






Borrar fotogramas 








1 



f texto * * □ I 


+ 




^^^^Q IZI \ 


■ + 




^] Fondo * * | [ 


D 
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Para ver la animacion completa, i a^vo y er control pe P . 
exporta tu archivo como SWF. 




No te olvides de 
guardar todos 
tus trabaios. 



Disf ruta del deporte 




3.3.2 Uniendo archivos en distintas escenas 



B 


W tBBEM 




Esc en a 1 




\7\ 


E&cena 2 






Es-cena 3 





Si quieres unir diferentes animaciones en un mismo proyecto, 
puedes usar la opcion Crear escenas. Observa que en el siguiente ejercicio se han unido, en 
tres escenas, las animaciones que hasta el momento has realizado. 

Abre la animacion de la interpolacion de forma que realizaste con la oruga, capullo y 
mariposa, copia todos sus fotogramas. Luego, abre un nuevo archivo y en la escena que 
aparece por defecto (Escena 1), selecciona el primer fotograma de la capa 1 y pega los 
fotogramas. 



Cortarfotoqrai 



Copiar fotogramas 



.INEADETIEMPO EDITOR DE MOVIMIENTO 



Pegar fotogramas 
Borrar fotogramas 
Seleccionar todos los fotogramas 

Copiar movimiento 

Copiar movimiento como ActionScript 3.0... 

Pegar movimiento 

Pegar movimiento especial... 

Invertir fotogramas 
V simbolos 



Cortar fotogramas 
Copiarfotoqramas 




Borrar fotogramas 

Seleccionartodos los fotogramas 

Pegar movimiento 
Pegar movimiento especial... 

Invertir fotogramas 
Sincronizar simbolos 



Luego, con ayuda del menu Insertar, crea una nueva escena. La 
nueva escena insertada, por defecto se denominara Escena 2. Aqui, 
copia los fotogramas del archivo saposaltarin. 



[ Insertar 1 

i — ^ 



Modificar 
fuevo sfmbolo.., 



Texto Comandos Control 
CtrkFS I 



tej^ io ° % 


Escena 1 
V Escena 2 











Interpolacion de movimiento 
Interpolacion de forma 
Interpolacion clasica 

Lmea detiempo 



Para que finalices, crea una nueva escena (Escena 3) y copia los fotogramas del archivo del 
banner animado que acabas de culminar. Cuando termines, presiona las teclas Ctrl + Enter y 
notaras que las tres animaciones se encuentran en el mismo proyecto y se reproducen una 
despues de la otra. 





Escena 2 



Escena 3 
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^Cuanto aprendi? 

1. Investiga y escribe un breve resumen sobre la utilidad de los simbolos en Flash. 

2. Escribe lo que representa cada fotograma y para que sirve. 



o 






• 


^ 
















• 


D 








A 


















• 


• 








<- 









Un fotograma vacio : 



3. ^Con que combinacion de teclas creas...? 
Un fotograma nuevo : 

Un fotograma clave : 

4. Marca verdadero o falso 



Podemos crear un simbolo dentro de otros simbolos, y asi 
indefinidamente. 

Un simbolo puede guardarse en el panel Biblioteca sin ser usado en el 
escenario. 

Los elementos de la Biblioteca solo pueden usarse una vez. 
Existe solo una forma de animar objetos en Flash. 

Mientras mas fotogramas por segundo tenga una animacion, esta avanzara 
mas rapidamente. 



5. Investiga las diferencias y semejanzas entre un simbolo y un grupo. 



(V) 


(F) 


(V) 


(F) 


(V) 


(F) 


(V) 


(F) 


(V) 


(F) 



6. Elabora un glosario de 10 terminos de Flash y describelos mediante analogias. 
Ejemplos: 1 . Cinematica - Movimiento 

7. Descarga el archivo "Carroyabeja.fla" y realiza las siguientes animaciones (observa en la 
plataforma como debe quedar tu archivo): 

• Realiza una interpolacion de movimiento con el carro. 

• A las llantas del carro dale movimiento con interpolacion de movimiento, para ello, 
utiliza el Editor de movimiento. 

• Realiza una animacion fotograma a fotograma con la imagen de la abeja. 

• Agrega a las alas de la abeja una animacion cinematica inversa, que simule el 
aleteo. 
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• Agregale al texto una interpolacion clasica perpendicular al texto. 



EL HECOJO DE REifDUOS 
' SOUDOS Eti LA CfUOAD 




1 



8. ^Recuerdas la imagen que elaboraste en el capitulo anterior, el de las aranas? Utiliza ese 
trabajo para realizar una animacion. (Observa el SWF de la plataforma, para que puedas 
realizar una mejor animacion). 

• A la arana grande, dale una interpolacion de movimiento. 

• A las pequenas y al texto, una interpolacion clasica. 




Descarga el archivo "Metamorfosis.fla" y realiza una interpolacion de forma a las 
imagenes. Luego, agrega texto a la imagen inicial (renacuajo) y final (sapo adulto). 
Tambien ammalos con interpolacion de forma. 



SAPO 
APULTO 



RENACUAJO 
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CAPITULO 4 



INTRODUCCION A ACTIONSCRIPT 3.0 



^Sabes que es una animacion 
interactiva? 

En este capitulo, aprenderas a 
crear ese tipo de animaciones 
donde te comunicaras con el 
programa a traves de 
instrucciones ActionScript 3.0 




Esto y mucho mas es lo que podras realizar con Flash CS4: 
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4. 1 iQue es ActionScript? 



ActionScript es el lenguaje que se utiliza para lograr una comunicacion con Adobe Flash. Con 
este lenguaje, podras ingresar una serie de instrucciones y tareas especificas al programa 
Flash, mediante scripts o codigos. Estas instrucciones permiten ejecutar acciones sobre 
distintos elementos que utilices, como botones, clips de pelicula, graficos o fotogramas. 



Por ejemplo, esta es una instruccion 
que se le da a una animacion para 
que se detenga: 



ACQONE5 - FOTOGRAMA 



ActionScript 3.0 T 


f*l Nivel superior 




[JJ Elementos de lenguaje 




adobe, utils 




f*l air.net 




f*l fl. accessibility 




f*l fl. containers 




0 fl. controls 




f*l fl. controls. dataGridClasses 




f*l fl.conirols.listClasses 




f*l fl. controls. progressBarClasses 




0 fl.core 




0 fl.data 




0 fl. events 




0 fl.ik 







* T J3 © v 

1 stop ( ) ; 



'\ Asistente de script 



| 3 Rmdo:l| ^ 
Linea 1 de 1, Col 6 



Las instrucciones en ActionScript son escritas dentro del panel Acciones, escribiendose siempre 
en ingles. Asimismo, utiliza elementos como el punto y coma para separar una instruccion de 
otra o corchetes para agrupar una accion, etcetera. 




Investiga cuales son las acciones mas 
comunes y mas usadas en 
ActionScript 3.0. Nombralas, escribe su 
script y describe su funcion. 









Ejemplo 
Stop 


Stop (); 


Detener las animaciones, para 
que no se repitan. 
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4.2 Creando una Galena de Imageries Interactiva 



^Sabes que es una galena interactiva 
de imagenes? ^Has visto antes este 
tipo de animacion? ^Sabes como se 
realiza? 




Una galena de imagenes es una presentacion que contiene diferentes imagenes ademas de 
textos, sonidos y botones que interaction para dar el efecto de animacion. 

Observa esta galena. Luego, sigue los pasos que se indican para su elaboracion. 



Tu galena estara 
conformada por distintas 
imagenes y animaciones de 
la Luna. 



i 




Para realizar tu galeria, comienza creando un documento nuevo ActionScript 3.0 (AS3) y realiza 
las siguientes indicaciones en el: modifica su tamano a 760 x 570 pixeles y su velocidad de 
fotograma a 24 FPS. Luego, guarda el documento con el nombre Galeria, para esta accion, 
puedes utilizar las teclas Ctrl +S o elegir la opcion Guardar del menu Archivo. 



Despues crea cuatro capas (Guia, Acciones, Botones y Fotos) y selecciona una de ellas, la capa 
"Guia". En esta capa, crea un contorno que te muestre los limites del escenario en cada 
momento. 

LINEA DET1EMPO | EDITOR DE MOYTMIENTO | 



□ 



^} Acciones 
Botones 
^ Fotos 



10 



15 



4. 


T 




\ 


P 




& 





Luego, modifica el tamano del rectangulo segun el tamano del escenario. Trabaja en el panel 
Propiedades. 

\% F ° rma 



xy POSICION Y TAMANO 



H: |570| 
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Ahora, alinea el cuadrado y coloca la capa a modo de contorno, luego bloqueala, haciendo die 
derecho sobre ella y escoge la opcion Guia. Esta accion te permitira que en el momento de 
exportar la animacion el rectangulo no se vea en ella, pero si en el escenario, de manera que 
te ayude a alinear los objetos. 



m 



ALINEAR | -= 


Alinear: 








1^ | & £\ 




is 


En 

escena 


Distribuir : 






-o- -o -Q. 






Ef 


Coinddir tamano:Espado: 






y ii lib 











m 


LINEA DE TIEMPO ^ 


V Guia Va/ 


Anadir \ia cle ■ mcvimiento clasica 


^} Acciones 


• ♦ ■ 






^) Botones • • ■ 






Fotos • • ■ 













LINEA DE TIEMPO [ EDITOR PE MOVIf 









a 






Acciones 




■ 






3 atones 


V * 


□ o 






z otos 


V * 


□ o 





En la capa "Fotos", importa tu primera imagen, desde la carpeta llamada "Galena" (esta se 
encuentra en la plataforma), para ello, ingresa al menu Archivo > Importar > Importar a 
biblioteca. Luego, busca la carpeta, selecciona la imagen Luna_Tierra.png y haz die en Abrir. 




Importar 



Exportar 

Configuracion de publicacion.., 
Vista previa de publicacion 
Publicar 



Ctrl+Mayus+F12 

I 

Mayus+F12 



Importar a escenario... 
Importar a biblioteca... 
Abrir biblioteca externa 
Importar vide 




t Tcdoslosformatos 



Inmediatamente, en la 
Biblioteca aparece la imagen 
y su simbolo grafico. Arrastra 
la imagen recien importada al 
escenario. 



2 elementos 
Nombre 



fjfcl Luna_Tierra.png 
Simbolo 1 



■ 




Luego, elimina el simbolo 
grafico porque no lo vas a 
utilizar. 



Nornb r-2 



L&| Luna_Tierra,png 
[SI Simbolo 1 




LINEA DE TIEMPO EDITOR DE MOVIMIENTO 



Tu linea de tiempo se debe mostrar asi: 



^ Guia 
^] Acciones 
^] Botones 



& i □ 
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Selecciona la imagen del 
escenario y conviertela en un 
clip de pelicula, utilizando la 
tecla F8. 




Nombra 



|A| Luna_Tierra.png 
I B Simbolo 1 



Despues, ingresa en el simbolo haciendo doble die sobre la instancia (imagen en el escenario) y 
crea una nueva capa, para colocarle un texto. 



Galena .f la* x 



™ Escena 1 


|pf 








LINEA DE T1EMPO I 




» -a □ i 


5 




T Capa 2 


j □ 










^] Capa 1 















Se trabaja con un 

simbolo para tener una 

h'nea de tiempo 
separada. 



m 

SJTI| 

N — 

^uferrarnie 
# 4~ 




Ahora escribe el titulo de la galena, puede ser "Moon" o "La luna". 



a 





Modifica las caracteristicas del texto escrito, para 
ello, seleccionalo y dirigete al panel Propiedades. 




Realiza estas modificaciones: 
coloca efectos a tu texto, 
dale el efecto lluminado (con 
la ayuda de la opcion Filtros). 
Este efecto lo utilizaras para 
separar suavemente el texto 
del fondo. 



De&enfoque 



lluminado 



Bisel 

lluminado degra dado 
Bisel degradado 
Ajustar color 



PROPIEDADES BIBLIOTECA 



| Texto estatico 



HZ) 



7 POSICION Y TAMANO 



Familia: | Tunga 



IE 



IB 



Tamafio: ^53 | Espaciado entr... 0.C 
Color: | | B Ajuste automatico 



Suavizado: [ Suavizado para legibilidad | ▼ | 



Propiadad 



| Valor 



t lluminado 



DesenfoqueX 5.0.px 

DesenfoqueY 50. px 

Intensidad 70% 
Calidad 
Color 



Baja 



Extractor Q 
lluminado interior □ 
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Observa que el texto es demasiado rigido, por tanto, procede a bajarle la opacidad. Para ello, 
ve a Propiedades > Color > Alfa y selecciona el color bianco al 70%. 



MOQN 



1 Q 





Tamano: 


150.0 pt Espaciado entr... 0.0 






Color: 


^\ 0 Ajuste automatico 




\ SE8E8E8 


Alfa:|7Q 


■Q 



Luego, exporta con Ctrl + Enter. 



Para que se aprecie una 
composicion armonica, es 
importante que las 
imagenes se integren. 




Ver Control Oepurar 



De la misma carpeta, importa a la Biblioteca, la imagen Lunation. Luego, en el segundo 
fotograma de la capa "Fotos", crea un fotograma vacio. 



LINE A DE TEMPO 


EDITOR DE MOVIMIENITO 1 








5 




li 


^ Guia 


* a □, 








^] Acciones 


* * ■ < 








Botones 










T Fotos 


J □ ■ 













LINEA DETTEMPQ | EDITOR DE MQVIMIEMTQ | 

® A □ l[J 5 1Q 



^ Guia 
^\ Acciones 
Eotones 



A □ 




Fotograma vacio 



Ya que esta imagen importada es un 
archivo GIF, esta pasara a tu biblioteca en 
varias imagenes y en un simbolo clip de 
pelicula. Escoge el simbolo y arrastralo al 
escenario. 




Eclipsel.png 




Lunation_animati 
on_November_20 
09.gif 



Eclipse2.png 



Full_Moon_Eclips 
e_2010_Animatio 
n.gif 



Luna_Tierra.png 



e: Lunation_animation_November_2009.gif ▼ [Todos los archivos (*.*) 



Abrir 
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&] Mapa de bits 97 
£] Mapa de bits 98 
j|] Mapa de bits 99 
E] Simbolo 1 
S) Simbolo 3 

j _i m %rrT~ 




LIN EA DE HEM PO EDITOR DE M OVIMIEI 



^ Guia 
tjJ Acciones 
Botones 



EXPLORA: Ingresa al Simbolo 3 y observa como funciona una animacion GIF. Luego, cambia el 
color de fondo del escenario para que se integre con la imagen. 




m 



Finalmente, alinea la instancia en el escenario. 



T7- PROPIEDADE5 


FPS: 24.00 


Tamano: 760 k 570 px 


| Editar... 




Escenario: Q 








| £000000 






• 



HAZLO TU MISMO: Crea tres fotogramas claves vacios en la capa "Fotos" y luego 
importa, a la biblioteca, las tres ultimas imagenes de la carpeta "Galeria". 



m 





© a □ i p 




\ Guia * 8 □ 


• [ 




^ Acciones * * ■ 


o [ 




^] Botones * * 1 


o [ 




ij j □ 


• •Qui: 











m 



:arpeta 









n 










Eclipsel.png 




Eclipse2.png 




Full_Moon_Eclips 








e_2010_Animatio 








n.qif 




Lunation_animati 
on_November_20 
09.gif 




Luna_Tierra.png 



ibre: "Full_Moon_Eclipse_2010_Animation.gif" "Ed if ▼ |Todos los formatos 



Arrastra, de la Biblioteca al escenario, los archivos recien importados en sus respectivos 
fotogramas vacios y despues alinealos. 



Para el tercer fotograma vacio: 

Nombre ^ j Vinculack 

j *| j 



[&1 EclipseZ.png 

SI Full_Moon_Eclipse_2010_Anift 
life Luna_Tierra,png 



S 



ALINEAR ^ 



En 

escena 



Aline ar: 
Distribuir: 

S S S Pf^ 0* [Hj 

Coinddir tamano: Espado: 

IS II Si -S □!= 
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Para el cuarto fotograma vacio: 



0 



LINEA DE TIEMPO | EDITOR PE MOVIMIENTO 





§? a 


□ 1 


i 




10 


^ Guia 




□ 


• 


u 






Acciones 


* * 


■ 


o 


u 






Botones 


* * 


□ 




u 






-I Fotos 




□ 




> o 













ALINEAR | 
Alinear: 

& £ 

Distribuir : 



-Qa □□ 



S S S 10 ^ 

Coincidir tamanoiEspacio: 

i 1 UH. □ n -i — i □ a 



En 

fltl 



S 



a j Vinculack 





it 


Eclipsel.png 




1 


j£ 


EclipseZ.png 




it 


Fu 1 l_M □ □ n_Ed i p s e_2D 1 0_An i m aUjV 






j£ 


Luna_Tierra.png nj^. 








Lunation_animation_November_2... ^ 






it 


Mapa de bits 100 









Para el quinto fotograma vacio: 



m 



LINEA DE ITEM PO | EPDTOR PE MQVIMIENTQ | 



\ Guia * B □ 


• 1 






Acciones + + ■ 


o I 






^\ Botones * * ■ 


o I 






T Fotos • • 















En este caso no solo lo alineas, 
sino que reduces su tamano. 



4.2.1 Ordenando la Biblioteca 



s 



lai Mapa de bits 99 
g Simbolo 1 
g Simbolo 3 
H Simbolo 9 
aJ _JO 3f|T| 




Ordena la Biblioteca creando una carpeta nueva ("Mapadebits") y arrastrando a ella, 
imagenes de mapa de bits. 

|£fc| Mapa de bits 97 
SI Mapa de bits 98 
U Mapa debits 99 
g Simbolo 1 
g Simbolo 3 
g Simbolo 9 



las 



Nomb re 



| mapadebits 



a | Vinculo 



Eclipsel.png 
EclipseZ.png 



LINEA DE TIEMPO 


EDITOR DE MOVIMIENT 






9 a □ i[ 


1 5 




^ Guia 


* A □ 


• 






Acciones 


* * ■ 


o 




^] Botones 




o 


D 




T Fotos 

















Mueve la Cabeza lectora para visualizar tus imagenes. 
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4.2.2 Creando botones 



Los botones te permitiran ir de una imagen a otra. Para crearlos, selecciona el primer 
fotograma de la capa "Botones" y dirigete al menu Ventana > Bibliotecas comunes > Botones. 



LINEA DE TEMPO 


EDITOR DE MOVIMIENTO 1 






m A □ 


5 






ID 


^ Guia 


* A □ 


D 








^\ Acciones 


* * ■ 


i Q 








1 ^ 


J □ 


rrrf 


i 






^] Fotos 




■1*1*1*1* 













Ventana ' 



•fir 



Ayuda 



0 



Biblioteca 



Ctrl+L 



Bibliotecas comunes 


► 


Botones 


Configuracion predefinida de rnovirniento 




Clases 


Acciones 


F9 




Sonidos 





Despues, escoge el boton push button - blue que se encuentra en la carpeta "Push Buttons" 
que esta, a su vez, dentro de la carpeta "Classic buttons". Luego, arrastralo al escenario. 




m 



277 etementos 
Nombra 



1^1 playback - stop 
. t& Push Buttons 



rjjjn push button - blue 



push button - green 
rjjjj]) push button - orange 
rjjjjp push button - red 
fipush button - yellow 
f?*l .hnH-nn aggFtq 

HI I . ► 




En la biblioteca, aparece automaticamente el boton que has 
arrastrado, enseguida seleccionalo y duplicalo. 



► ^1 mapadebits 




i^n push button ■ 


■ blue 




ffi push button ■ 


■ blue copia 




[E] Simbolo 1 





HAZLO TU MISMO: Duplica ; 

el boton cuatro veces y i 

arrastralos al escenario, uno ! 
nor uno. 

Luego, selecciona todos los 
botones y alinealos. 



ALINEAR 



Alinear: 

IS. A -I 

Distribuir: 



■Cr° □□ 



0* 



En 

escena 



Coincidir tarnanoiEspacio: 

l"="l |Q _□ M 
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Entrando a [a hnea de tiempo de un boton 

Ingresa al boton haciendo doble die sobre este 




I INF A r>F TTFMPn 



FmmR 



QF Mn\TMTFNTn 




Presionado: 

cuando das 
die sobre el 
boton. 



s? a n 


Rep.. 


Sobre 








^] Layer 3 * * ■ 






[] 


• 












D 


• 






^] Ldjftfi 5 * * □ 






D 


o 






<3 Layer 13 * * ■ 








□ 






<a Layer 7 * * □ 








D 






Layers * * ■ 






D 


• 






^] Layer G * * ■ 








D 


• 


















h □ a 








24.-: 


















Zona activa: 

area en el que 
se mantendra 
activo el boton. 



Reposo: el boton se 
encuentra sin ser activado 
por el mouse. 



Sobre: el mouse esta 
sobre el boton, pero 
aun no se da die. 



Observa como se ve al boton cuando esta en reposo o 
presionado. 

EXPLORA: Mueve la cabeza lectora y observa el funcionamiento del boton, tambien puedes ver 
sus elementos ocultando o mostrando sus capas con el "ojito". 





En la capa 4 o Layer 4, tienes el color base del boton, al 
que puedes modificar con la opcion Color de relleno de 
la barra de herramientas. 











1 □ Rep... Sobre 


Pre-si.. 


^ Layer 17 




• 




' ■ 


D 




^ Layer 16 








> □ 


D 




^] Layer 1 




K 




» ■ 


• □ 






^ Layer 2 




* 




> ■ 


• D 






^ Layers 




* 




■ □ 


D 






T Layer 4 S 








□ 


D 






^] Layer 5 








* □ 


• □ 






^ Layer IS 




* 











I HAZLO TU MISMO. Van'a los colores de los botones segun los prefieras. Luego \ 
| que este lista tu botonera, procede a subir las imagenes para que no esten tan J 
cerca a los botones y no se vea muy aglomerado. 
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IMPORTANTE: Tambi en puedes obtener botones, convirtiendo imageries en simbolo boton. 

Comandos Control Depura r V entana Ayuda | 




4.2.3 Programando con ActionScript 3 

Para realizar la programacion, trabaja en la capa "Acciones" y activa el panel Acciones. Para 
ello, dingete al menu Ventana y elige la opcion Acciones (tambien puedes activarlo 
presionando la tecla F9). 



LIN E A D E " EE M P 0 EDUO R DE M Q VIMIENTC 



* a np 


1 5 


^Guia . nil n 


1 T Acciones S * * 


J\ a 


^] Botones » * □ , 




^ Fotos * * □ < 


■ • • • • 







rar 


Ventar.a 


] Ayuda 









Configuracion predefinida de movimiento 



m 



Acciones 
Comportamientos 
Errores de compilador 
Paneles. de depuracion 
Explorador de peliculas 



ft 



re 

Mayus+F3 
Alt+FZ 

I 

Alt+F3 



Esta es la ventana de Acciones en donde escribiras los codigos o las instrucciones. 



ACQONES - FOTO GRAMA 



Referencia 
de los 
codigos 
que hay en 
AS3 



ActionScript 3.0 



(J) Nivel superior 

f*H ArgumentError 

f*D arguments 

0 Array 

[*J Boolean 

0 Date 

f*D DefinitionError 

0 Error 

0 EvalError 
Function 

H int 

3 Math 

f*H Namespace 

3 Number 

3 Object 



© v f (-J SP { > "\ AsiEtente de script 



P |^| Selection actual 

S Acciones : Fotogra.. 

f=l Escena 

^] Definidones de simbolo 



Menu de 
ayuda del 
panel 
Acciones 



Se escriben 
las 

acciones. 



3 Aconites: 



lines 1 de 1, Col 1 



Se muestran los objetos que tienen acciones. 
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Ubicate en el fotograma 1 de la capa "Acciones" y escribe en la ventana de acciones el script 
"stopQ", para que tu animacion se detenga en el primer fotograma. 



ACCIONES ^C^oSS^ 




- 


ActionScript3.0 T 


* T JB © V M (W £ * "\ Asistente de script 






(jj Nivel superior ^ 
ArgurnentError 

f^ll =rrn, .r.-.^i-.+n I ~\ 


3top() ; 





Luego, observa el icono que aparece sobre el fotograma 1 de la capa "Acciones", este indica 
que en ese lugar se esta ejecutando una orden (accion). 



LINEA DE HEMPO 


EDITOR DE M OVIMIENTC 




w a nf 


5 

| i i i 


^ Guia 


* a □ 










D 


^] Botones 




i D 


^] Fotos 






• 


• 


• 


I 





Presiona Ctrl + Enter. 





] HAZLO TU MISMO. Crea cuatro fotogramas claves vacios, en la capa donde 
i estas trabajando y, en cada fotograma, escribe la misma accion: stopQ;. 



LINEA DETIEMPQ 


EDITOR [>E MOVIMIENTQ 1 




9 • U L , 1 




^ Guia 


• fl P|. I 




o 


^ n olololol 
















^ Fotos 


* * □ «u*u 









m 



LIN EA DE TIEM PO EDITOR DE M 0 VIMIENTO 



« a □ i [T 



% Guia 


* A □ 










dlIolIolIolI 

.: : J 0 




^] Botones 




• [ 


ss 


^ Fotos 




*l*l*l*l* 











• Etiquetando fotogramas 

Las etiquetas sirven para nombrar a los fotogramas, de esta forma, al dar una orden con 
ActionScript 3.0, puedes decirle al programa que se dirija al fotograma con el nombre "x". 

Crea una nueva capa llamada "Etiquetas" y dividela en fotogramas clave vacios. 



0 



LINEA DE TEMPO ! EDITOR. DE MOVIMIEMTO 1 


tinl 


1 5 




\ Guia * fl □"[ 


D 




^ Acciones * * ■ 


. a a 01 a 

iOOOO 




|Etiquetas| \J □ 


> D 




^] Botones * * □ 


D 




^] Fotos * * □ 











m 
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LINEA DE TIEM PO | EDITOR PE MOVIMIEIfTO | 



\ Guia . fl □ , 


> D 




•qj Acciones • • ■ J 


J o 


ol 
o 


0L 
O 


0L 
O 




T Etiquetas y" * 


□ < 


o 


o 


O 


O 




^] Botones * * □ , 


* D 




^3 Fotos # # □ , 


* * 


• 


• 


• 









Diseho Grafico con Adobe Flash CS4 




PONTIFICIA 

UN I YE RSI DAD 
CATOLICA 

DEL PERU 



Luego, selecciona el primer fotograma y escribe 
el nombre de etiqueta "Luna 1". Para ello, 
dirigete al panel Propiedades. 



PROPIEDADES BIBLJQTECA 

Fotograma 



!! 



® 



ETIQUETA 



LINEA DE TIEMPO 



EDITO R DE MOVIMIEI 



\ Guia * A □ 


• 


[ 


] 


^] Acciones * * 1 




la a c 
boc 


L 


il J □ 


1 


Lai 


1, 


tJ Botones * * ■" 


• 


[ 


] 


^ Fotos * * □ 















Nombre: 



Lunal 



Tipo: | Nombre 



Observa que al escribir el nombre de etiqueta, se crea un 
icono rojo en el fotograma. 



HAZLO TU MISMO; Realiza el mismo ejercicio 
con los otros fotogramas clave vacios y nombralos 
(Luna2, Luna3, Luna4 y Luna5). 



LINEAGE TIEMPO t EDITOR DE MQVIMIENTQ | 



^ a □ i 1 








\ Guia * A □ 


• [ 








^] Acciones * * | 


Q 
O 


Q 
O 


Q 
O 


01 < 
O ( 










o 


o 


o 


• 

o 








^] Botones * * □ 


• [ 








^ Fotos * * □ 























• Creando listeners 



Ahora, pasa a crear los listeners, estos son scripts que tienen la funcion de enlazar diferentes 
objetos a traves de los nombres de las etiquetas y funciones. La forma general de crear un 
listener es la siguiente: 

nombreClipdepelicula.addEventListener(nombreEvento,nombreFuncion); 



En este caso, el nombre del clip de pelicula se refiere al nombre de instancia de los botones, 
por ello, pasa a crear un nombre de instancia para cada boton: 



Selecciona el primer boton, 
dirigete al panel 
Propiedades y escribe 
Imagen1_btn. 




PROPIEDADES 



rnaqenl btn 



® 



Boton 



jzi 



HAZLO TU MISMO: Otorgale a cada uno de los botones 
un nombre de instancia (Imagen2_btn, Imagen3_btn, 
Imagen4_btn, Imagen4_btn). 



□ a de: push button - bl Intercambiar... | 



Luego, escribe, en la ventana de acciones el listener, que esta compuesto por los siguientes 
elementos: 

• Nombre del clip de pelicula, la etiqueta del boton (Imagen1_btn) 

• Listener: addEventListener 
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Nombre del evento, el evento del mouse que quieres que detecte si el usuario ha 
pulsado y soltado el boton (MouseEvent.CLICK). 

Funcion: Lo que se ejecutara al presionar el boton, a la que llamaras "ir". 




Luego, con los otros botones, crea 4 listeners mas con el mismo evento y crea un nombre 
diferente para cada funcion (ir2, ir3, ir4, ir5). 



1 


stop ( ) ; 










2 


Imagenl 


fctrj . 


addEventListener (MouseEvent 


CLICK r 


ir) ; 


3 


Iiragen2 


_ttr. . 


addE vent Listener (MouseEvent 


CLICK, 


ir2) ; 


4 


Imagen3 


_btr. . 


addEvent Listener (MouseEvent 


CLICK, 


ir3} ; 


5 


Iiragen4 


btr. , 


addEvent Listener (MouseEvent 


CLICK, 


ir4) ; 


6 


ImagenS 


btr. . 


addEvent Listener (MouseEvent 


CLICK, 


ir5) ; 



• Insertando las funciones 



Para crear una funcion, ten en cuenta estos pasos: comienza con la palabra clave Function, 
luego el nombre de la funcion "ir", despues sigue el parametro de tu evento e:MouseEvent y 
finalmente, el tipo de datos que devolvera la funcion. La funcion no va a devolver ningun tipo 
de datos, sino que simplemente va a ejecutar una accion y le asignas void (vacio). 



Despues anade la orden 
gotoAndPlay("Luna1"), esto significa que el 
boton te llevara al fotograma con el nombre 
"Lunal". 



7 






8 




function In (e : MouseEvent }: void 


9 




{ 


10 




gotoAndPlay ( "Lunal"} ; 


11 












function ir ( e : MouseEvent }: void 
{ 

gotoAndPlay ( "Lunal " } ; 

> 



Selecciona esta funcion y copiala. 



Luego, pegala debajo y haz 4 veces este procedimiento. Enseguida, cambia los datos del 
nombre de la funcion (ir2, iY3, iY4, iY5) y el nombre de fotograma o etiqueta (Luna2, Luna3, 
Luna4, Luna5). 



i 

2 
3 
4 

5 
6 
7 
E 
9 
10 
11 
12 
13 
14 
15 
16 



stop ( ) ; 

Imagenl_btn . addEventListener (MouseEvent . CLICK f ir} ; 
~T''.=i ij^ti ? htn dddEventListener (MouseEvent . CLICK r ir2) ; 
lF.agen3_t tn . addEventListener (MouseEvent . CLICK r ir3 } ; 
Iir.acer.4_t: tn . addEventListener (MouseEvent . CLICK r ir4 } ; 
ZF.aqen5_ttn . addEventListener (MouseEvent . CLICK f ir5} ; 

function ir (e : MouseEvent } : void 
{ 

gotoAndPlay ( " Lunal w ) ; 



function 
{ 



ir2 



(e : MouseEvent} :void 



gotoAndPlay ( 



■Luna 2 ") 



96 



Diseho Grafico con Adobe Flash CS4 




PONTIFICIA 

UN I YE RSI DAD 
CATOLICA 

DEL PERU 



Para ampliar la ventana de Acciones, solo estirala desde la 
esquina inferior derecha. 



Luego, exporta la animacion. 









— 1 




95 


100 





















IMPORTANTE: Con la opcion Exportar del menu Archivo, puedes 
guardar peliculas en formatos diferentes al SWF, como AVI. 



m 



Configuracion de publicacion... ^* Ctrl+Mayus+F12 
Vista previa de publicacion 



• r 



Exportar imagen... 

Exportar pelicula... Ctrl+Alt+Mayus+S 

* 







ca... Tipo | 


■ 






Equ.po 






« . 






Red 

Tpo 


galena 


1 1 
[ Mr | 


QuckTme Tmov) 

Sjcumoa * EMF r enfl 

Secuenoade maps de bit Tirol 
Sacuaroa de JPEG Cjpg} 





Observa que tus botones ya funcionan, pero al hacerles doble die te llevan a otra imagen. Esto 
sucede porque les estas dando la orden de gotoAndPlay en vez de gotoAndStop. Esta ultima 
instruccion permite que la animacion se detenga en el fotograma indicado sin saltarse al 
siguiente. 



Por tanto, lo que haras es simplemente 
cambiar Play por Stop. 



I function ir2 (e : Mous eE vent) :^vg. 
qotofln dlpiav J N Iur.a2 " ) ; 

| function ir3 (e : Mous eE vent} : void 
gotoAndPlay- ( "LunaS") ; 

| function ir4 (e : Mous eE vent} : void 
go t o AndPl ay ( " Luna4 rr } ; 

| function irS (e : Mous eE vent} :void 
gotoAndPlay ( "LunaS") ; 



| function ir (e :MouseEvent } : void 
go t ofln js t op| { rr Lunal m ) ; 



| function ir2 (e : Mous eE vent } :vaid 
gotoAnc Stop| ( "lur.dz ri ) ; 



| f unct ion i r 3 ( e : Mous eE vent } : vo i d 
got ofln js t op| [ " Luna3 w ) ; 

| function ir4 (e : Mous eE vent } :void 
"-{"Luna,*"} ; 



gotoAnc Stop 



| function irS (e : Mous eE vent } :void 
gotoAnc^^ffl( ri Lj.r.a5 M ) ; 



Luego, nuevamente, exporta tu trabajo (Ctrl + Enter ) y observa que ya tienes un correcto 
funcionamiento de los botones. 

Ahora que ya tiene tu programacion lista, procede a complementar tu galena con titulos 
informativos en cada imagen. Para ello, selecciona una imagen y conviertela en clip de 
pelicula. 



m 
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En este caso, utiliza la imagen del fotograma3, de la capa "Fotos" y colocale el nombre del 
clip de pelicula "Luna3". Despues, ingresa al otro clip de pelicula y crea una nueva capa para 
insertar un titulo. 



m 



Galeria.fla* x 



m 



LINEA DE T1EMPO | EDITOR DE MOV 




9 A □ - 








Capal . . □] 









En el panel Propiedades, escoge la tipografia que desees y 
colocale un color claro para que se diferencie del fondo. 



N L -| FMrramienti 

^ S7\ 



CARACTER 



Familia: |Tunga 



Estilo: | Bold 



Tamano: .2.0,0 pt Espaciado entr... .0.0 
Color: | 1 0 Ajuste automatico 



Suavizado: f Suavizado para legibilidad | ▼ | 



Luego, escribe: Eclipse lunar, noviembre del 2003, y alinealo. 



Para ver los limites de tu escenario, coloca tus capas en contorno. Tambien, puedes utilizar las Imeas guia 
de la regla (VER > REGLA) para una alineacion mas precisa. 



LINEA DE "IEMPO EDITOR DE MOYIMIENTC 




^] Capa 1 



I isq | ipo |50 |o |50 | II 





HAZLO TU MISMO; Escribe un titulo para la cuarta 
imagen (Brillo terrestre sobre la Luna, abril de 2010) y otro 
a la quinta imagen (Eclipse total, diciembre 2010). Ctrl + 
Enter . 
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4.2.4 Instalando sonido de fondo 



Para instalar un sonido en tu documento, primero ordena la Biblioteca. Para ello, crea 
diferentes carpetas y coloca ahi tus botones, sonidos, clips de pelicula e imagenes. 



Nornb re a | Vincu lac 








|botones| 




Nornb re a j Vincu 


* (lJ3 classic buttons 
&\ Eclipsel.png 
Hfcl EclipseZ.png 


► (^3 botones 




f5 | sonido 

► £3 clips 


[S] Full_Moon_Eclipse_Z010_Animatio... 




► £3 imagenes 


SI Luna_Tierra,png 






^ Luna3 




NOTA: Para crear una nueva carpeta, 


g Iuna4 




haz die en el icono Nueva carpeta de la 


SI Lunation_animation_November_Z... 




parte inferior izquierda de la Biblioteca. 


!■ £3 mapadebits 









Ahora, en la Linea de tiempo crea una nueva capa llamada "Sonido" y selecciona el primer 
fotograma. Luego, importa el sonido sonido. mp3, a la Biblioteca (este se encuentra en la 
plataforma). 



LINEA DE TIEMPO 


EDITOR DE MOV 
9 Q □ 1 






<^ Guia 








^| Acciones 


• * ■ 


V 




^ Etiquetas 


• • ■! 






1 i Sonido / • • 




] 


Botones 


• . □, 




D 


Fotos 












Todos los formatos 



El sonido aparecera en tu biblioteca como cualquier otro archivo importado, para ordenarlo, 
arrastralo a su respectiva carpeta. 



■A. | Vinculo 



Nombn 



| Vincu k 



► £3 botones 

► £3 Clips 

P- £3 imagenes 
j^j sonido 



| sonido, mp3 



► £3 botones 

► £3 Clips 

► £3 imagenes 

► £3 sonido 




Con el fotograma seleccionado de la capa "Sonido", dirigete a la Biblioteca y arrastra el 
sonido al escenario. Finalmente, dirigete al panel Propiedades y selecciona la opcion 
Reproducir indefinidamente, para que el sonido no se detenga. 

NOTA: Si deseas ver tu 
animacion como una 
publicacion web, simplemente 
arrastra el archivo SWF a 
Internet Explore o presiona 
F12. 



LINEA DE TIEMPO L 



< Guia . Q 






iJ Acciones * * ■ { 
tjJ Etiquetas • • O ! 


pi 




-J Botones • ♦ □ 


■ [ 


i 


x\ Fotos • ♦ □ 


m 





Nombre: f sonido. mp3 



Efecto: | Ninguno 



33 s 



Sine: | Evento 



Reproducir inde... 



44 kHz Estereo 16 Bit 46.2 s 737... 



Para ver tu trabajo final, exporta tu galeria como SWF utilizando las teclas: Ctrl + Enter. 
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jCuanto aprendi? 

1. Investiga y escribe las diferencias y semejanzas entre un clip de pelicula, un boton y un 
grafico. 



c 




V 





2. Marca verdadero o falso: 

Puedes crear un boton a partir de un clip de pelicula. (V) 
Los elementos importados en el panel Biblioteca solo pueden usarse 1 vez. (V) 

Programas un boton utilizando su nombre de instancia. (V) 

Las etiquetas solo se utilizan en los fotogramas. (V) 

Se puede ejecutar una accion sobre un objeto que no sea un boton. (V) 

Puedes crear un boton dentro de otro boton. (V) 

Si la zona activa de un boton esta vacia, el boton puede funcionar. (V) 

Una imagen bitmap puede ser animada al ser convertida en simbolo. (V) 

Se puede aplicar filtros a un grafico. /y\ 



3. Reconoce y escribe el nombre de lo que representa cada grafico. 



El 



V 



"SI 



4. Averigua que otras funciones tienen las etiquetas en Flash. 
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5. Crea una nueva galena interactiva, considera el tema "Las maravillas del mundo". Esta 
debe contar con sus respectivos botones, sonido de fondo e informacion. 

a. Importa imagenes no mayores a 150 pixeles a tu biblioteca. 

b. Anima y ordena tu galena segun lo aprendido. 

Observa el modelo: 
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6. Agregale un sonido a todas las animaciones que hasta el momento has realizado. 
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Diseho Grafico con Adobe Flash CS4 



PROYECTO INTEGRADOR 



Primera Parte 



Imagina que has sido contratado por el area de Responsabilidad Social de una empresa. Esta 
empresa quiere realizar una animacion para sensibilizar a la poblacion sobre un problema que 
enfrenta tu localidad. 

1 . Elige el tema, que puede ser algunos de los que se mencionan a continuacion: 

Cuidado del medio ambiente, el respeto a las normas de transito, el cuidado de 
animales en peligro de extincion, los valores, etcetera. 



2. Luego, investiga sobre el tema elegido y arma la pauta o guion que vas a seguir para 
realizar tu animacion. Determina las escenas, el texto y los personajes que vas a utilizar 
para realizar tu trabajo. 

3. Dibuja tus escenarios, los personajes y texto que vas a utilizar, en diferentes archivos 
de Flash. Cada uno de estos dibujos debe estar en secuencia, como si fueran escenas de 
una pelicula que luego animaras. Debes trabajar cinco archivos. 



1 . Realiza las animaciones a los objetos creados en la primera parte del proyecto, a modo 
de comercial o pelicula. 

2. Asimismo, agrupa tus archivos en las escenas de un solo proyecto (archivo Flash). 

3. Luego, inserta diferentes sonidos a tu animacion. 

4. Finalmente, presenta tu trabajo en SWF o formato AVI. 



Segunda parte: 
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